使用GitHub/GitLab/码云搭建个人博客

发表于 | 更新于 | 分类于 ，

我为什么要搭建个人博客?

前段时间我在用印象笔记做一些整理和知识归纳，感觉很不舒服，后来装了一个马克飞象花了了70多人名币用来作为印象笔记的markdown编辑器，这样确实舒服了不少。

但是紧接着我就想既然总结了一些东西干嘛不发布到我的博客上去呢（当时我的博客在CSDN)，我只能从马克飞象中复制黏贴到博客上去，感觉又重复写了一遍，瞬间有了一键部署博客的想法。

后来我结合我之前在github上搭建的个人博客，百度了一下看有没有GitLab和码云上面的类似博客系统，结果还真让我给找到了，不但找到了而且个人感觉非常棒，接下来来看看我是怎么做的。

在本地搭建Hexo博客

为什么选择Hexo

使用Markdown语法写博客，可免去把文本转换成HTML的痛苦，因此对Markdown支持得好，是下面一切选择的前提。支持Markdown的博客工具之中，比较入眼的有ghost, Jekyll和hexo。

ghost

ghost目前人气最高，号称是要取代WordPress的下一代博客平台。不过问题也正在于此，它的目标定位是博客平台，像WordPress一样重量级。仅用于一个独立博客，有点高射炮打蚊子的意思。最关键的一点，ghost生成的是动态网站，依赖数据库，我的直觉立刻让我放弃掉了ghost。

为什么我要排斥数据库？一个原因是我对纯文本有偏爱，感觉上要比二进制可控。但主要原因还是出于我的一个顾虑，说来可笑：我希望到了年老昏花的时候，这个博客依然在。

那时可能已经写不动了，技术上的事更折腾不了，但我希望它还能运行，能看。站在今天，无法预料那时候是什么操作系统，天知道nodeJS能不能坚持到那天，更别说ghost。唯一能确定的是，越简单、对环境依赖越少，就越有可能长命百岁。我可不想到时候发现博客打不开了，戴上花镜趴上前去一看，db connection error。

相比动态网站，静态网站对环境的依赖少得多，可移植性好。剩下的Jekyll和hexo都是生成静态网站的，它俩虽然用起来有差异，其实是殊途同归，最后的目标都是静态页面。

Jekyll

Jekyll的流行，与它被GitHub使用有很大关系。GitHub上的每个项目都可以有自己的主页，可定制程度很高，可以绑定域名。开发者按照Jekyll的格式写好后提交，GitHub会自动生成页面。就是说，如果仅在GitHub上托管网站，你的本地其实不需要有Jekyll运行环境。但是做独立博客总不能依赖Github，一切都要自己动手，麻烦就来了。

首先Jekyll的依赖太多，要求本地安装python、ruby和一些库。这对Windows很不友好，光是安装那一大堆依赖就不轻松，更别提文本编码方面的bug。我一上来就吃了不支持中文的当头一棒，修改ruby代码指定成UTF8才踉踉跄跄搞定。

网上读Jekyll的文档，总觉得它的语法和功能不够酷，作为程序员实在是对它无爱。所以用了一段时间后就不断寻找替代品，有幸遇到了下面要出场的hexo。

hexo

hexo获得的关注虽不如前两者，但它有几点很讨人喜欢：

  • 依赖少（仅依赖node），易于安装
  • 台湾人写的，不用担心对中文支持不好
  • 对程序员友好，要是愿意折腾还是有的折腾的

基于以上原因，我最终选择了hexo作为维护博客的工具。

操作环境：win10

安装nodejs

最新版的nodejs可以在这里获取，下载后直接安装即可，安装完后打开cmd，输入npm -v，如果能输出版本号则说明安装成功。

安装git

git的安装和配置请自行百度，这里就不详细写了，这是git的下载地址

安装hexo

如果已经完成了以上两步，在一个私人文件夹下打开cmd，运行

1
2
3
4
5
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

如果一切正常，在浏览器中访问本地服务器就可以看到运行在本地的博客了。

将博客部署到GitLab pages上

添加ssh-key

在gitlab完成注册后，首先访问这里，向你的帐户添加ssh keys，ssh keys的生成可以参考如下的步骤，打开2.2安装的Git Bash，输入如下命令(自行替换其中的用户名和邮箱信息)

1
2
3
git config --global user.name "lxqxsyu"
git config --global user.email "lxq_xsyu@163.com"
ssh-keygen -t rsa -C "lxq_xsyu@163.com"

最终生成的文件一般位于C:\Users\UserName.ssh文件夹下，打开id_rsa.pub，将里面的所有内容添加到这里。

新建一个项目

接着点页面右上角的+号，新建一个项目。项目名为”username.gitlab.io”，其中username为你的gitlab账号用户名，项目类型选择Private

添加.gitlab-ci.yml文件

利用gitlab部署你的博客和github最大不同在于，在github上部署博客需要先在本地生成各种页面文件，然后再推送到github上就可以直接访问了。而使用gitlab则需要在服务器端完成生成和部署两个阶段，应该需要在项目的根目录下添加一个.gitlab-ci.yml文件用来指导服务器如何处理你提交的源文件。一个完整可用的.gitlab-ci.yml如下，其中我把hexo默认的公式渲染引擎替换为了pandoc，同时添加了生成站点地图的功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
before_script:
  - apt-get update -qq && apt-get install -y -qq pandoc
image: node:4.2.2
pages:
  cache:
    paths:
    - node_modules/
  script:
  - npm install hexo-cli -g
  - npm install
  - npm uninstall hexo-renderer-marked --save
  - npm install hexo-renderer-pandoc --save
  - npm install hexo-generator-sitemap --save
  - npm install hexo-generator-baidu-sitemap --save
  - npm install hexo-util --save
  - hexo deploy
  artifacts:
    paths:
    - public
  only:
  - master

修改站点配置文件&更换主题

这里推荐大家使用NexT主题，这也是本站目前使用的主题，具体的安装步骤可以参考这里，有一点需要注意的是，将themes\next\目录下的.git文件夹删除。

下面主要还需要对项目根目录下的_config.yml进行修改

接下来，在项目根目录下运行如下命令

1
2
3
4
5
git init
git remote add origin git@gitlab.com:lxqxsyu/lxqxsyu.gitlab.io.git
git add .
git commit -m "init blog"
git push -u origin master

以上第二句命令请根据自己的项目名称进行调整。

完成推送后，访问你的项目主页，如果看到passed的图标，就表示构建成功了，访问https://username.gitlab.io/ 就可以看到自己刚刚建立的博客了。

如果需要添加新的文章，将文章的md文件保存到source_posts文件夹下然后重新执行推送就可以了，服务器端完成构建后，如果没有错误就会出现在你的博客页面上。

到此何如在gitlab上搭建一个博客就说完了。

如何将博客部署到Github pages 和码云 pages

如果上面的步骤完成了，接下来的事情就很简单了，这里我们就以码云为例了（因为GitHub是一样的）

创建一个项目

创建一个私有仓库，名字使用username,例如下面就是我创建的。

修改_config.yml文件

修改配置项目根目录_config.yml 文件，修改deploy的值然后保存：

1
2
3
4
5
6
7
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: 
	  coding: https://gitee.com/lxqxsyu/lxqxsyu.git,master
	  duapp: https://git.duapp.com/xxxxxxxxxx,master

我这里配置了两个，一个是码云的，一个是BAE的，没错，我的网站就在BAE上，至于为什么最后放到BAE后面再说。

配置环境和上传码云

输入命令在文件夹打开的GIT中 配置环境和上传到码云：

1
2
$ git config --global user.name空格+你的码云的名字
$ git config --global user.email空格+你的码云的邮箱

然后：

1
npm install hexo-deployer-git --save

输入命令一键部署：

1
hexo deploy

之后会弹出一个对话框，输入码云的帐号密码。大家最后在安装好git以后配置一个全局的文件，这样就可以不用每次提交都输入账号密码了。

使用免费域名

恭喜你，部署成功，你可以访问 username.gitee.io来查看你的博客了。

写博客新姿势来了

简要配置

如果你的NexT主题不是最新的，你可以去github上拉去最新的next主题代码，最新的一般会集成好一些插件可以省去你很多时间。

打开themes/next下的_config.yml文件

1
2
3
# Set to true, if you want to fully override the default configuration.
# Useful if you don't want to inherit the theme _config.yml configurations.
override: true

这个意思是是否覆盖外部的全局设置，如果你要在主题里面设置建议这里设为true.

1
2
3
4
5
6
7
8
9
10
favicon:
  small: /images/favicon-16x16.ico
  medium: /images/favicon-32x32.ico
  apple_touch_icon: /images/apple-touch-icon.jpg
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

# Set default keywords (Use a comma to separate)
keywords: "Android,dp2px,地痞兔劈叉,程序,Kotlin,Java,水寒,阳光小强,CSDN"

这个是网页关键字和图标的设置

1
2
3
4
5
6
7
8
9
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

这个是整个版面样式的设置，我的博客就是Pisces，因为这个最好看。

1
2
3
4
5
6
7
8
menu:
  home: / || home
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  about: /about/ || user
  sitemap: /sitemap.xml || sitemap

设置主菜单显示

1
2
3
4
5
6
7
social:
  GitHub: https://github.com/lxqxsyu || github
  GitLab: https://gitlab.com/lxqxsyu || gitlab
  QQ: http://shang.qq.com/wpa/qunwpa?idkey=737b1b97197a4973f30b8dce0573d8cacaeed55b6ae87c203e1008eb9ab5f96c || qq
  Weibo: https://weibo.com/p/1005051833844383/home || weibo
  E-Mail: mailto:lxq_xsyu@163.com || envelope
  blog: http://blog.csdn.net/dawanganban/ || stack-overflow

这个是设置自己的社交平台的

1
2
3
4
5
6
7
8
9
10
11
12
# Blog rolls
links_title: Links
links_layout: block
links_icon: link
#links_layout: inline
links:
  AndroidDevelopTool: http://www.androiddevtools.cn/
  在线Icon库: http://iconfont.cn/
  Kotlin中文文档: https://www.kotlincn.net/docs/reference/android-overview.html
  视频爬取工具: http://www.flvurl.cn/
  Gif图片压缩工具: http://soogif.com/compress
  EhlxrBlog: https://ehlxr.me/

这个是设置链接的

1
2
3
4
5
6
7
8
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true
  totalcount: true
  separated_meta: true

这个是字数统计

1
2
3
4
5
#Reward
reward_comment: 您的支持是我创作源源不断的动力
wechatpay: /images/reward_weixin.png
alipay: /images/reward_alipay.jpg
#bitcoin: /images/logo_width.png

这个是打赏的设置，里面的图片资源我们可以放到source/images文件夹下面

其实我们还可以修改代码来添加额外的插件，比如我这里添加了gitalk评论插件：

1
2
3
4
5
6
7
8
9
# Gitalk
gitalk: 
  enable: true    #用来做启用判断可以不用
  clientID: 'xxxxxxxx'    #上面生成的往这里怼
  clientSecret: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx'   #同上
  repo: xxxxx.github.com    #仓库名称
  owner: xxxxxx    #github用户名
  admin: xxxxxxx
  distractionFreeMode: true

关于gitalk直接给你一个连接安装连接吧，请参考Hexo添加Gitalk评论插件

其他的一些设置都很简单，你可以设置完直接刷新页面看看效果就知道了。

创建并发布博客

创建文章

使用新建命令：

1
- hexo new "filename"

这样在我们的source/_posts目录下就会有一个名字为filename.md的文件，这个时候你应该知道怎么办了，对的，使用markdown编辑器编辑博文，这里给大家推荐VS Code

界面是不是很炫酷呢？还自带控制台，而且集成了git管理。

我其实还是比较喜欢用Haroopad（一个windows上最好用的markdown编辑器）

在创建的文章前面会有几行开头属性，采用统一的yaml格式，用三条短横线分隔。下面是文章正文。

文章的正文支持markdown格式，建议你先学习一下它的语法。markdown不像html似的一大堆标签，很简单，只有几个符号。

文章可以拥有如下属性：

Setting Description Default
layout Layout post或者get
title 文章的标题 默认filename
date 文章日期 文件的创建日期
updated 修改日期 文件的修改日期
comments 是否开启评论 true
tags 文章的标签 [tag1, tag2, tag3]
categories 文章分类 [Android, 动画]
permalink url中的名字 文件名

博文图片

在我们编写博客的过程中会遇到插入图片的地方，最简单的办法是把图片上传到类似七牛这种服务器上，然后将连接添加进来。

然而这种方式不是很友好，感觉很麻烦，其实我们可以安装一个hexo插件，将图片保存到我们的编辑目录然后引入本地图片。

安装插件：

1
npm install hexo-asset-image --save

然后你每次new一篇新文章的时候，就会有一个对应名称的文件夹存在，你只需要将图片放到这里使用相对路径访问就可以了。

摘要

有时候我们需要截取一部分文章作为首页的摘要显示,可以在文章中添加分隔符号

\<!– more –>

部署文章

使用命令部署：

1
2
- hexo g
- hexo d

好了，现在刷新你的码云地址看看你新写的博客吧。

有的时候我们写博客过程中可能需要对之前的博客做一些修改进行发布，但是正在写作过程中的博客又不能发布怎么办呢？

草稿

草稿相当于很多博客都有的“私密文章”功能。

hexo new draft “new draft”

会在source/_drafts目录下生成一个new-draft.md文件。但是这个文件不被显示在页面上，链接也访问不到。也就是说如果你想把某一篇文章移除显示，又不舍得删除，可以把它移动到_drafts目录之中。

如果你希望强行预览草稿，更改配置文件：

render_drafts: true

或者，如下方式启动server：

hexo server –drafts

下面这条命令可以把草稿变成文章，或者页面：

hexo publish [layout]

绑定域名

上面我说过我的博客是在BAE上面，为什么不用免费的码云而放到BAE上面呢，这是因为我有一个闲置的域名,没错，就是本站地址。

GitLab和GitHub可以绑定域名但是访问慢，而且搜索引擎会忽略。码云访问速度块，但是不支持域名绑定，我的天啊！

其实还有一个重要原因就是为了给搜索引擎看，让它们能抓取到页面。

绑定域名的前提是你要现有域名而且是备案的，可以去万网看看。然后去BAE注册一个账号，购买服务器，这个服务器是目前我见到最便宜的服务器了，不过对于我们个人博客够用了，创建一个nodejs服务器，然后将git地址配置到_config.yml中就可以了（我上面的配置里面已经有了）。

写上几篇文章然后使用 site: 你的网站地址， 去百度查查有没有被收录进去，例如我们查看百度的。

没有收录也不要着急，多写原创文章就会被搜索引擎看到了。有了这么一个博客是不是很方便呢？我们现在真的只需要关心我们要写的内容，其他都so easy.