新博客，新开始

文章目录

1. 搭建博客的过程
2. 搭建博客的过程中遇到的一些问题

搭建博客的过程

之前一直是在新浪 SAE 平台上用 wordpress4SAE 搭建我的博客。虽然也听说过静态博客、 GitHub Pages 什么的，但是一直也没有动力去弄。

最近，我以前用的域名 lyuxu.com 快到期了，我感觉 .com 域名不适合个人使用，就在 eNom 上另外注册了一个 .me 的域名，也就是现在这个 lvxu.me。（现在嫌.me域名太贵，又换成lvxu.site了。）

后来一想，域名都换了，干脆把后台程序也换了吧，就开始研究怎么在 GitHub 上搭建博客。

因为自己也不是程序猿，对 GitHub 并不熟悉，而互联网上用 GitHub 搭建博客的教程大都没有对 git 本身有什么讲解，所以一开始研究 GitHub 费了一番功夫，好在 Git 简明指南和一个叫 Git - Book 的网站给了我很大帮助。

鼓捣鼓捣了几天，终于大概会用 GitHub 了，就开始研究怎么用 GitHub pages 搭建博客。在这个过程中，cnFeat的一篇文章如何搭建一个独立博客——简明GitHub Pages与Hexo教程和 Hexo 的官方文档对我的帮助很大。另外还要感谢 WuChong 他的Jacman 主题真的很棒。

另，后来考虑到国内访问速度的问题，把博客从 GitHub 转到了 GitCafe 上。

搭建博客的过程中遇到的一些问题

如何把程序也同步到 GitHub 上

因为 hexo 程序部署的时候会部署到 master 分支（或者 gh-pages）上，要想把hexo的程序也同步到 GitHub 上，需要新建一个分支（比如 hexo），在本地转到 hexo 分支上工作，然后再配置_config.yml，使之部署到 master 分支（或者 gh-pages）上。

修改 .gitignore 文件

hexo 安装后默认的 .gitignore 文件是以下这个样子的

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/

这会导致 hexo 的程序本身不会被上传， checkout 的时候，hexo 的程序本身会丢失，在重装 hexo 的时候，_config.yml文件又会被覆盖。所以要把修改.gitignore 文件为：

#.DS_Store  取消忽略
#*.log  取消忽略
#node_modules/  取消忽略
.deploy*/
!.deploy_git/README.md  不忽略 README.md 文件
/public/
db.json
*.bak  #忽略 notepad++ 的备份文件
Thumbs.db

需要注意的是，如果在没有更改.gitignore 文件的前提下，已经上传到 GitHub 过，那已经上传过的文件就已经纳入了本管理，不受.gitignore 文件的影响，这样的话，就需要修复.gitignore 文件。

1
2
3

$ git rm -r --cached .   # 从暂存区域删除所有文件
git add .                # 把所有文件添加到暂存区域
git commit -m ".gitignore 文件已经可以正常工作"

这样把暂存区所有文件删除，再重新添加时，.gitignore 文件就会起作用。

把网站同时部署到 GitHub 和 GitCafe

由于GitHub在国内访问延迟较大，因此不少人也把博客部署在 GitCafe 上。 GitCafe 上建站和 GitHub 类似，只是无论建立个人页面还是项目页面，都需要建立一个 GitCafe-Pages 的分支，还有绑定域名的方法不同，其他都大同小异。

如果想让 GitHub 和 GitCafe 上都是最新的页面，就需要把网站同时部署到 GitHub 和 GitCafe 上。hexo 本身有同时部署到多个地址的功能，hexo 的官方文档有说明，再次不再赘述。需要注意的是， GitHub 和 GitCafe 都支持 SSH 加密，可以使用同一套密钥，这样部署时比较方便。

部署完成后，就可以修改域名记录，以 DNSpod 为例，可以设置线路类型，将默认线路指向 GitHub 的IP，将电信和联通线路指向 GitCafe的IP，这样就可以使国外 ip 访问 GitHub，国内 ip 访问 GitCafe。

GitCafe没啦~

README.MD 的问题

GitHub 通常要求建立一个 README.MD 文件，这个README.ME 文件会显示在项目主页上。但是hexo会把所有的 .md 文件都解析成 .html 文件。

cnFeat的博客里说上传 README.MD 文件到 .deploy 文件夹里再 deploy 就可以，但是经我测试，hexo3.0 下，deploy会生成一个 .deploy_git 的文件夹，部署时会将其中的文件推送到 GitHub / GitCafe 中。但是部署时会重新生成文件，README.MD 会被自动删除掉，因而无法部署到服务器上。

我目前的解决方法是把 README.MD 文件改名成 README.mdown 文件，放在 /source 里面。这样的话，hexo不会将其解析成 .html 文件，而在 GitHub / GitCafe 中，也能正常显示。

添加微博秀

我使用的 Jacman 主题本身是支持微博秀的，但是主题生成的微博秀不好看，想要其他样式，需要自定义。

首先打开新浪微博开放平台中的微博秀设置的页面，根据自己的喜好生成代码。

比如我生成的代码是：

<iframe width="100%" height="550" class="share_self"  frameborder="0" scrolling="no"  src="http://widget.weibo.com/weiboshow/index.php?  language=&width=0&height=550&fansRow=1&ptype=1&speed=0&skin=9&isTitle=1&noborder=1&isWeibo=1&isFans=0&uid=1234567890&verifier=abcdefgh&colors=2CA6CB,ffffff,666666,0082cb,e6e6e6&dpc=1"></iframe>

然后在 \hexo\themes\jacman\layout\_widget 中新建名为 weiboshow.ejs的文件，添加如下代码：

<div class="weiboshow">
  <p class="asidetitle"><%= __('weibo') %></p>
    微博秀代码
</div>

但是为了代码美观，也方便自己万一要更换微博帐号，最好把 uid=1234567890&verifier=abcdefgh 改成 uid=<%= theme.author.tsina %>&verifier=<%- theme.author.weibo_verifier %> ，这样就可以在主题的配置文件中修改微博帐号了。

最后记得重新配置 Jacman 主题的 _config.yml 文件

....
widgets: 
- rss
- category
- tag
- weiboshow ##启用刚才新建的 weiboshow 插件
- links
....
author：
....
  weibo_verifier: abcdefgh ## e.g. b3593ceb Your weibo-show widget verifier ,if you use weibo-show it is needed.
  tsina: 1234567890    ## e.g. 2176287895  Your weibo ID,It will be used in share button. 
  ## 从微博秀的代码里找到这两个值填在这里
....

更换评论系统到Gitment

原先使用的好些评论系统，渐渐都不好用了。在网上看到现在很多人使用Gitment，利用GitHub本身的Issues来搭建评论系统。

搭建过程中，参考了Gitment原作者的博客、添加Gitment评论系统踩过的坑 | XiChen’s Blog和Gitment评论功能接入踩坑教程 - 简书等文章。

Gitment搭建方法本身不再赘述，根据作者博客说明，将下列代码添加在hexo主题模版文章页面即可一般是themes\[主题名字]\layout\post.ejs或post.swig。

<div id="container"></div>
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
<script>
var gitment = new Gitment({
  id: '页面 ID', // 可选。默认为 location.href
  owner: '你的 GitHub ID',
  repo: '存储评论的 repo',
  oauth: {
    client_id: '你的 client ID',
    client_secret: '你的 client secret',
  },
})
gitment.render('container')
</script>

Gitment的配置本身我不再赘述，我主要就我遇到的问题说一说。

页面ID的问题。参考前面两个踩坑教程，把id写成文章时间。
原代码的第一行是 <div id="container"></div> ,如果你的页面已经有一个div的id是container的话，就容易冲突，可以将这一行修改为<div id="gitment_container"></div>，并将倒数

第3行改为gitment.render('git-comments')即可。

另外还需要注意的是，如果你的Hexo里面有多个模版，请把不同模版的页面ID生成的方法改成相同的。

吕旭说

汽车、网络、职教和生活