menu 刘兴刚博客
more_vert
chevron_right 首页 » WEB开发 » 正文
Wordpress to hexo 搬家记录
2016-06-15 | WEB开发 | 暂无评论 | 2667 次阅读 | 1778字

前言

博客还没到半年,一直强迫着自己不折腾网站主题啥的,用选择了比较简洁的设计笔记开源的一个主题,用了pjax,感觉网站打开还是挺酷,由于用的国外vps,网站打开速度还是一般,最近一直看些程序员的博客,打开速度非常快,发现他们是用hexo弄的静态博客,心里就痒痒想geek一把,由于对git、nodejs原先也就是听说过,接触太少,要填的坑还是很多的,但最终还是坚持下来了,下面就记录下hexo搭建博客的过程。

准备工作

  • 安装node:到Node.js官网下载相应平台的最新版本,一路安装即可。
  • 安装git:根据系统不同安装相应的git环境。mac系统不多说,windows一般安装msysgit。下面是我本地msysgit的截图,也还是挺好用的:
    1.jpg

*hexo只需这几个简单常用的命令,就能够轻松维护自己的博客了:

$ hexo new(n)    //写文章
$ hexo generate(g)    //把文章生成页面
$ hexo server(s)    //启动本地服务调试
$ hexo deploy(d)    //部署到github 可与hexo g合并为 hexo d -g
$ hexo clean        //清除原先生成的public文件
$ hexo clean && hexo generate --deploy  //生成博客后发布

安装Hexo

打开git。

$ npm install -g hexo

然后输入命令hexo -v输入hexo的版本号即为安装成功。

部署Hexo

在我的电脑中建立一个名字叫「Hexo」的文件夹,然后在此文件夹中右键打开Git Bash。

$ hexo init

Hexo随后会自动在目标文件夹建立网站所需要的所有文件。
初始化成功后,文件夹里会有这些东西:

├── _config.yml        #配置文件
├── package.json    #应用程序数据
├── scaffolds
├── source            #网站内容
|   ├── _drafts        #草稿
|   └── _posts        #文章
└── themes            #主题

到此安装完毕了,我们可以开始写博客了。

$ hexo new "My New Post" # 创建一个新博文

执行完这条命令后,会生成 /source/_posts/My-New-Post.md 文件,我们用编辑器打开这个文件,他是一个 Markdown 文件,如果不了解 Markdown,可以点开这个链接《Markdown简明语法》查看简单语法。

从 Wordpress 迁移

首先安装 hexo-migrator-wordpress 插件:

$ npm install hexo-migrator-wordpress --save

登录 Wordpress 后台,在“工具”-“导出”中导出所有记录。

$ hexo migrate wordpress <source>

source 是 Wordpress 导出文件的存放目录,可以放到当前hexo的执行路径下面,这样直接文件名就可以如下:

$ hexo migrate wordpress wordpress.xml

Duang!妥妥地导入到 _posts 目录中了!

图片却显示不出来,当然是路径不对,就从wp目录下的wp-content下拷出图片到source文件夹,用文本编辑器的替换功能把图片路径都替换成新的

本地访问博客

生成静态文件:

$ hexo generate

启动本地服务:

$ hexo server

这时提示

Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

然后在浏览器打开 http://0.0.0.0:4000/,就可以看到迁移好的博客啦!

github准备

  • 博客是在github上托管维护的,所以当然需要一个github的账号了。然后创建一个名为liuxinggangsu.github.io的仓库,必须是这样**.github.io名字的仓库,否则访问网址后填着仓库名,这个是默认网址。
  • 要想使用git命令来和github进行提交部署等操作,需要进行一些配置,大概就是下面一些命令
git config --global user.email xxx@163.com
git config --global user.name xxx
git config --list   //查看配置是否正确
ssh-keygen -t rsa -C xxx@163.com(邮箱地址)      // 生成ssh
找到.ssh文件夹打开,使用cat id_rsa.pub    //打开公钥ssh串
登陆github,settings - SSH keys  - add ssh keys(把上面的内容全部添加进去即可)
ssh -v git@github.com   //检验下Git安装是否正确,
显示hi github用户名!You've successfully authenticated 说明Git安装正确
  • 然后在网站配置文件 _config.yml文件中,找到Deployment,修改配置:
deploy:
  type: git
  repository: https://github.com/liuxinggangsu/liuxinggangsu.github.io.git 
  branch: master

注意:冒号后面要加上一个空格,否则会报错。
这个是yml文件特有的格式要求

  • 备注:如果执行上述命令报错,你可以试试下面这个命令再试。
$ npm install hexo-deployer-git --save

另外,部署的时候会提示输入github的账号和密码。由于每次部署都会提示,很烦人,也很影响效率,所以你可以试着这样做:

  • 在系统环境变量中设置一个环境变量

2.png

  • 然后在你的用户目录(C:Usersusername)下新建一个叫 _netrc的文件,内容如下:
machine github.com
login your name
password xxxxxx

然后你可以再部署试试,就不需要输入用户和密码,方便友好多了^_^
由于换电脑重新安装hexo后deploy提示如下错误

FATAL Something's wrong. Maybe you can find the solution here: Troubleshooting
Error: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

at ChildProcess.<anonymous> (/home/liufang/workspace/hexo/node_modules/hexo-util/lib/spawn.js:42:17)
at emitTwo (events.js:87:13)
at ChildProcess.emit (events.js:172:7)
at maybeClose (internal/child_process.js:818:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)

看了网上解决方法如下

备份了 博客目录, 之后在别的电脑上重新使用的时候出现的这个问题. 
解决方法:
删除 博客目录下的 .deploy_git 文件夹.
之后在 hexo d 试试.

以上说的跟我的情况正好一样,我删除了那个文件夹还是不行,最后卸载Git 2.5版本,安装1.9版本,问题解决-_-原来是我的Git版本太新的缘故。。。

更换主题

hexo自己默认的主题landscape,如果你满足与它,可以跳过这个步骤,直接进行下一步。但是我却还不够满足,因为我发现了一个页面交互人性化,并且完美兼容不同终端显示的主题next
clone主题代码
在目录下执行下面的命令clone主题代码:

$ git clone https://github.com/iissnan/hexo-theme-next themes/next

选择这个主题,主要是它的精简的理念,加上文档写的非常详细,想修改评论、阅读量、统计、头像修改啥的说明的非常详细

独立域名

到目前为止,我们的博客都是使用github分配的二级域名liuxinggangsu.github.io来访问的,那么我们会想如果能自己设置个域名,是多么cool的事!要怎么办呢?那就继续往下看吧!

有了自己的域名之后,liuxinggangsu.github.io替换成liuxinggang.com,只要设置下解析即可,进入万网的云解析页面,添加如下解析:

ymjx.jpg
说明:192.30.252.154和192.30.252.153是github服务器对应的ip地址,这步一定要设置,否则访问不了。

  • 添加CNAME
  • 然后回到博客项目根目录,在source/下新建一个名为CNAME的文件,里面的内容写入liuxinggang.com即可。
    然后在浏览器输入liuxinggang.com,即可代替之前的github.io的域名,访问到自己的博客页面了。实在是台、太cool了!

国内访问速度优化

由于hexo-next默认使用的是googleapi的字体库,对于国内用户来说经常会需要加载很长时间。
幸好360推出了字体加速服务。只需要将googleapis替换成useso即可。
  • 直接修改主题配置文件把font的host值设置为fonts.useso.com 这个值默认是不设置的,就是用的默认google字体库
  • 也可以修改默认字体库 themesnextlayout_partialsheadexternal-fonts.swig 第47行,将default(‘//fonts.googleapis.com’) 改为 default(‘//fonts.useso.com’) 即可。

hexo创建无模板的静态html

由于原先博客放了些静态文件,如音乐播放和个人的作息时间表,直接放到source文件夹下也被自动渲染成了html,导致页面乱套了,就想如何设置跳过渲染
_config.yml中有skip_render属性,可以设置静态html和md文件跳过渲染
_config.yml中找到skip_render

skip_render:
- demos/index.md;
- demos/index.html;

单个文件夹下全部文件:skip_render: demo/*

单个文件夹下指定类型文件:skip_render: demo/*.html

单个文件夹下全部文件以及子目录:skip_render: demo/**

多个文件夹以及各种复杂情况:

skip_render:
- demos/*.html
- demos/**

后记

用了一上午时间用markdown的在线编辑器:MaHua写的这篇文章,感觉到又回到了typecho了,这才明白当时typecho支持markdown,那时候感觉这个编辑器咋这么简化,当时是很不适应选择的WordPress,弄完又回到markdown,此时感觉markdown确实酷。

None
发表评论
暂无评论
textsms
account_circle
email
link