By

文章目录
  1. 1. github上建站
    1. 1.1. 1.注册账号
    2. 1.2. 2.创建仓库
  2. 2. 安装git
  3. 3. 安装node.js
  4. 4. 安装hexo
    1. 4.1. 1.安装
    2. 4.2. 2.配置
    3. 4.3. 3.本地效果查看
  5. 5. 导出wordpress博客
  6. 6. 修改域名解析

本文主要是介绍自己在github上搭建blog，把自己在wordpress中的博客迁移过来的过程，以及这过程中遇到的坑。

github上建站

1.注册账号

在github上注册账号过程就不详说了，没啥难度。

2.创建仓库

注册在完成后登录，在自己的首页，即https://github.com 页面的右下角会有一个You repositories栏，点击右边绿色的New respository按钮，创建一个Repository name为与注册账户名称相同的并且带上.github.io后缀，如jacpy.github.io（将jacpy替换成你自己注册的名称，下同 ），注意这里是github.io不是github.com，点击创建repository页面的底部点击Create repository按钮后会要你选择博客的模板和一些信息，整个过程完成后，就可以直接访问https://jacpy.github.io 了。
具体参考：https://pages.github.com/

安装git

如果你PC上安装过git，此步略过；如果没安装，那么从git官网 上下载git安装，安装过程中要将git添加到PATH中，安装过程中有页面有这样的选项，钩上就行了。

安装node.js

到node.js官网 下载一个安装，如果你是老版本了，建议升级成最新版本，我PC上安装的是最新的0.12.7版本，npm -v的版本是2.11.3。

安装hexo

1.安装

打开命令行，执行以下命令：

1
2
npm install -g hexo-cli
npm install hexo --save

2.配置

先创建一个目录jacpy，再在命令行cd到这个目录，执行下面命令，执行初始化操作和安装一些插件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
hexo init
npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save
npm install hexo-server --save
npm install hexo-deployer-git --save
npm install hexo-deployer-heroku --save
npm install hexo-deployer-rsync --save
npm install hexo-deployer-openshift --save
npm install hexo-renderer-marked@0.2 --save
npm install hexo-renderer-stylus@0.2 --save
npm install hexo-generator-feed@1 --save
npm install hexo-generator-sitemap@1 --save

  • 提示：把上面一大串命令直接复制到命令行，不用一条一条复制，再回车。
    注意：如果在执行命令过程中会有一些提示，比如提示要执行一些命令，那么就按要求直接执行，下同，不然就出现一些意想不到的情况。后面会有一个错误解决的例子。

3.本地效果查看

环境已经准备好了，接下来就可以写一篇了博客了，执行创建命令：

1
hexo new blog-width-hexo-in-github

等待几秒，会在jacpy/source/_posts/创建一个blog-width-hexo-in-github.md文件。打开文件就可以编辑，使用的markdown语法。

  • 话说这命令执行的速度太慢了吧，貌似整个一晚上的操作印象中，执行命令速度都很慢，都要等几秒钟，没有瞬间完成的，吐槽一下执行的速度。另外如果长时间发现命令没响应，就按ctrl + C终止命令，重新再执行一下，这个也是坑爹的地方。
  • 生成的md文件介绍可以参考写作 ， Front-matter。

清除和生成静态HTML文件，命令如下：

1
2
hexo clean
hexo generate

执行后，会在目录jacpy目录下创建一个public目录，里面是生成网页的全部内容，OK，启动服务预览一下：

1
hexo server

在浏览器中访问:localhost:4000，你可以看到正常的页面内容，如果出现以下不正常的页面：

1
2
3
4
5
6
<%- partial('_partial/head') %>
<%- partial('_partial/header', null, {cache: !config.relative_link}) %>
<%- body %>
<% if (theme.sidebar && theme.sidebar !== 'bottom'){ %> <%- partial('_partial/sidebar', null,     {cache: !config.relative_link}) %> <% } %>
<%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
<%- partial('_partial/mobile-nav', null, {cache: !config.relative_link}) %> <%- partial('_partial/after-footer') %>

在命令行执行：

1
npm install

再生成执行清除和生成HTML命令即OK。因为在执行上面命令后，会有提示要执行npm install命令，但自己忽略了，才导致这个问题。

导出wordpress博客

导出wordpress博客可参考hexo官方说明。
导出来的是一个xml文件，转换完成后，在命令行cd到public目录，先删除public目录中的内容，再执行初始化命令：

1
2
3
git init
git remote add origin https://github.com/jacpy/jacpy.github.io.git
git pull origin master

  • 注意：是master分支，不是gh-pages分支。后面的内容都是在master分支上操作。

OK，删除public中所有的内容，除了.git目录。然后执行：

1
2
3
git add -A
git commit -m "remove default pages"
git push origin master

按提示输入用户名和密码。上面的操作是将github上面的页面文件先删除，也可以在github上面打开文件，点击文件右上角的垃圾箱按钮，一个一个的删除。
再回到jacpy目录，执行清除和生成HTML命令，最后使用上面的命令将publish的内容提交到github上面，再刷新一下你的jacpy.github.io主页，内容已经更新上去。
到这一步已经大功了。当然你可以使用hexo deploy命令，将内容提交到github，需要配置jacpy目录下的_config.yml文件，在末尾找到deploy项，进行编辑：

1
2
3
4
5
6
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/jacpy/jacpy.github.io.git
  branch: master

修改域名解析

  • 这部分是自己耗时最多的地方，中间还遇到404问题，卡了很久。如果你自己有一个域名，想直接通过域名访问你的github上面的博客，形如访问jacpy.com时，会自动跳转到jacpy.github.io页面，但地址栏并没有改变，那么接着往下看。

因为自己的域名是在万网上注册的，所以到万网上修改配置。为了避免做广告之嫌，推荐一下godady 可以对比一下性价比。万网现在已经被阿里收购了，所以网页风格都和阿里云保持一致了，访问[域名列表页面(http://netcn.console.aliyun.com/core/domain/tclist) ，点击自己的域名会跳转到另外一个页面，我原来是将这个域名绑定到一个IP地址，所以看到的记录类型是A，点击右边的修改栏，将记录类型修改成CNAME，如下图所示：
域名列表截图

保存以后，如果现在访问你的域名jacpy.com，肯定会出现404，因为还要在master分支上创建一个CNAME文件。

  • 出现404有两个原因，一个是你访问的是jacpy.github.com而不是jacpy.github.io，另外一个就是在master分支上没有CNAME文件。

OK，在jacpy/source目录中创建一个CNAME文件，在里面在增加一行内容：

1
jacpy.com

然后再重新生成HTML命令和提交到github。OK，到此已经全部完成了：)。

  • 如果发现HTML中有乱码，将md文件转换成UTF-8编码即可。

参考：
http://wsgzao.github.io/post/hexo-guide/
https://linux.cn/article-5930-qqmail.html
https://help.github.com/categories/github-pages-basics/
https://hexo.io/zh-cn/docs/

文章目录
  1. 1. github上建站
    1. 1.1. 1.注册账号
    2. 1.2. 2.创建仓库
  2. 2. 安装git
  3. 3. 安装node.js
  4. 4. 安装hexo
    1. 4.1. 1.安装
    2. 4.2. 2.配置
    3. 4.3. 3.本地效果查看
  5. 5. 导出wordpress博客
  6. 6. 修改域名解析