如何简易搭建个人博客？

2020-02-15 本文已影响0人胜言_

纪实 | 使用Github Pages+Jekyll+Gitalk在Win10搭建静态博客网站。
首先，在这里非常感谢@BYQiu和@梦幻之云，他们的文章解决了搭建博客路上的诸多棘手问题。
这篇文章写在我的博客网站：@胜言刚刚搭建完成不久——被Google收录而没有被百度收录的时候。由于对Linux不尽熟悉，故本次搭建使用Win10操作系统。我尽量详细记录搭建过程中可能会被踩的坑，最后祝你搭建顺利~
$\color{brown}{注意！}$ 我的Github仓库中已经集中修复了前面几位作者在早年 ( 2017年 ) 搭建过程中出现的大多数问题。包括在执行jekyll serve时Jekyll-paginate报错和存在大片颜色提示的问题。

0. 食用目录

上线静态网站和初步设定
1.1 Fork我的Github仓库
1.2 下载Github Desktop
1.3 利用_config.yml快捷配置博客
1.4 把这些代码提交推送到Github上
安装Jekyll：在本地调试网站功能
2.1 安装Ruby2.3.3 p222
2.2 安装对应的RubyDevKit
2.3 使用Rubygem安装Jekyll和Jekyll bundler
2.4 使用Jekyll本地调试
2.5 最后记得推送代码到Github
拥有属于自己的域名 (栗子：腾讯云)
3.1 注册域名
3.2 CNAME域名解析设定
3.3 利用Github pages将网站设置为HTTPS
Google搜索收录指南

1. 先上线静态网站

要领：我们先从Github上Fork一个已经存在的仓库(这里保存着一个模式博客网站的文件目录)，再下载Github Desktop软件，把该仓库pull到本地，修改一些参数，让网站看起来像你所想的那样。

1.1 Fork我的仓库

打开我的Github pages仓库
登录Github，没有账号就注册，然后点击Fork。

修改此仓库的名称为你的Github用户名.github.io,Github就会自动识别它为Github pages(静态网站)了。

这时候你就可以在地址栏输入你的Github用户名.github.io访问博客网站了。

如果这时候出现404错误，打不开博客网站，首先检查仓库名是否依照上述设定，否则，临时解决办法如下。
首先，点Create new file。
然后，新建一个叫CNAME的文件，文件内容写你的仓库名你的Github用户名.github.io即可。

1.2 下载Github Desktop

下载Github Desktop，请点这里，安装不再赘述。
打开桌面上的Github Desktop，欢迎界面上点右下角clone a repository，选择你的Github用户名.github.io这个仓库，选择本地的存放位置，我这里是存放在D:\NoSpace\Shengyan-Coder.github.io。
点clone，等几分钟，clone完成。

在我的电脑打开刚才的存放路径，是博客网站的所有文件。

你需要知道：
_config.yml ：网站全局配置文件
_posts ：放置博客文章的文件夹
img ：存放网站中用到的图片的文件夹

1.3 利用_config.yml快捷配置博客

用一个文字编辑器(记事本也行)打开_config.yml，根据注释自行设置，需要注意的地方有文字说明。

# 网站宏观设定
title: 胜言的博客    # 显示在博客主页的大标题
SEOTitle: 胜言的博客 | ShengYan Blog    # 显示在浏览器标签栏的标题
header-img: img/home-bg.jpg    # 网站主页的背景大图，可在img文件夹挑选设定或自决
description: "所有美好的东西都是免费的，比如阳光、空气和水。"    # 主页大标题下方的描述性话语
keyword: "Shengyan-coder, Shengyan Blog, 胜言的博客, 胜言, python, C"    # 网站的关键词
url: "shengyan-coder.github.io"          # 填仓库名xxx.github.io，注意双引号" "勿动。
baseurl: ""      # 一般不作修改
github_repo: "https://github.com/Shengyan-Coder/Shengyan-Coder.github.io.git" # 你的仓库绝对路径

# 侧边栏设定
sidebar: true                           # 开启侧边栏，关闭：false
sidebar-about-description: "读书好，好读书，读好书。"    # 侧边栏头像下方的描述性话语
email: ********@**.com    # 侧边栏头像下方显示的邮箱
sidebar-avatar: /img/avatar_m.jpg      # 自己的头像会显示在侧边栏，填相对路径

# 社交帐号设定
RSS: false
weibo_username:     6745715152    # 微博
zhihu_username:     yao-long-57-48    # 知乎
github_username:    Shengyan-Coder    # Github
# facebook_username:  none    # 脸书
jianshu_username:   77a0e61753f1    # 简书
#twitter_username:   none    # 推特

社交帐号设定示例
我的简书主页网址是：jianshu.com/u/77a0e61753f1
加粗的这部分填到_config.yml里jianshu_username：后面就好了，其他社交帐号设定类似。

# 评论系统: Gitalk
gitalk:
  enable: true    #是否开启Gitalk评论
  clientID: '******************'                            #生成的clientID
  clientSecret: '*************************************'    #生成的clientSecret
  repo: 'Shengyan-Coder.github.io'    #仓库名称
  owner: 'Shengyan-Coder'    #github用户名
  admin: ['Shengyan-Coder']
  distractionFreeMode: true #是否启用类似FB的阴影遮罩

评论系统我们使用和Github一脉相承的Gitalk，它利用Github仓库的issues功能来管理我们博客的评论。
这里已经帮你集成了Gitalk插件在网站目录里。上述需要填写clientID、clientSecret、repo(填写：你的Github用户名.github.io)、owner(填写你的Github用户名)、admin(管理员，负责创建issue，在数组中填你的Github用户名)。
clientID和clientSecret 点此申请，图中的Homepage URL和Authorization callback URL均填写你的Github用户名.github.io。
TIPS：待域名注册后，上面两个URL可改为你的域名。

@BYQiu
复制下面的clientID和clientSecret 到_config.yml相应位置即完成Gitalk的配置。
@BYQiu
此时你打开你的网站中的一篇博客文章，在文章末尾点击使用Github登录，Gitalk会在你的Github仓库自动自动创建这篇文章的issue，相关评论会在网站和Github issues同步显示。

# 统计
# Analytics settings
# 百度统计
ba_track_id: 你的百度跟踪id

百度统计设定方法
打开百度统计官网，点管理。

点新增网站

按图上提示设定，然后点确定。
image.png
出现如下页面，复制问号以后双引号以前的这段字符串到_config.yml里的ba_track_id:后面即可。

在百度统计的那个页面下方有代码安装检查，此时需要打开Github Desktop 左下角点击commit to master，再点右方中部的push，稍等片刻，回到刚才的百度统计，完成代码安装检查即可。

# 友情链接栏设定
# 可填写多个，注意格式
friends: [
    {
        title: "网站·学习日志",    # 显示在网站上的友情链接标题
        href: "http://wsheng-note.herokuapp.com"    # 友情链接地址
    },{
        title: "简书·胜言",
        href: "http://www.jianshu.com/u/77a0e61753f1"
    },{
        title: "苹果",
        href: "https://apple.com"
    }
]

1.4 把这些代码提交推送到Github上

打开Github Desktop 左下角点击commit to master，再点右方中部的蓝色button：push xxx，稍等片刻即可。

2. 安装Jekyll：在本地调试网站功能

这时候你已经完成了基础搭建。为了方便，我们需要在本地调试网站的功能，而不是频繁地向Github提交代码(那样会很累~ )。这时候需要先下载Ruby和Rubydevkit(jekyll是用ruby开发的)，然后通过Rubygem安装jekyll，这些过程你会遇到很多坑，因为这是在Win10系统(微硬受死吧~)，不过放心，我会一一为你解决的。
下文无法解决的问题请看：诸报错解决方案@梦幻之云

2.1 安装Ruby2.3.3 p222

打开网站：RubyInstaller.org，在左侧找到这个版本的Ruby(这个版本是被验证可以在Win10运行的)，点击开始下载。

下载完成安装即可。唯一需要注意的是记得把Add Ruby executables to your PATH这一项点选上，这样你可以直接在cmd上使用ruby.

打开cmd输入ruby -v验证安装成功。

> ruby -v
ruby 2.3.3p222 (2016-11-21 revision 56859) [x64-mingw32]

2.2 安装对应的RubyDevKit

还是在上面的网站RubyInstaller.org，选择下图版本的RubyDevKit开始下载。

安装无碍，不在此赘述。然后打开cmd输入如下命令。

> cd C:\RubyDevKit
> ruby dk.rb init
> ruby dk.rb install

2.3 使用Rubygem安装Jekyll

打开cmd，输入以下两个命令，修改并查看gem源。
TIPS：国内无法访问https://rubygems.org/；Gem是Ruby语言的支持库下载站，类似python语言的Pip。

> gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
> gem sources -l
https://gems.ruby-china.com
# 确保只有 gems.ruby-china.com

然后在命令行中执行gem install jekyll完成对Jekyll的安装。

$\color{brown}{注意！}$ 如果在安装jekyll的过程中遇到 SSL 证书的问题，即如下问题

> gem install jekyll
ERROR: Could not find a valid gem 'jekyll' (>= 0), here is why:
Unable to download data from https://rubygems.org/ - SSL_connect returned=1 errno=0 state=SSLv3 
read server certificate B: certificate verify failed (https://api.rubygems.org/latest_specs.4.8.gz)

请修改C:\Users\你的Win10用户名\.gemrc文件，增加 ssl_verify_mode: 0 配置，以便于 RubyGems 可以忽略 SSL 证书错误。
$\color{brown}{Tips:}$ 如果找不到.gemrc文件，请自行在C:\Users\你的Win10用户名目录下创建，并输入以下内容保存。

:sources:
- https://gems.ruby-china.com
:ssl_verify_mode: 0

最后在命令行输入如下代码，完成对Jekyll bundler的安装。

> gem install jekyll bundler

$\color{brown}{Eureka！}$

2.4 使用Jekyll本地调试

在cmd命令行输入jekyll -v，测试Jekyll是否成功安装 ( 按照上述步骤和注意事项应该不会有问题吧 ) 。

> jekyll -v
jekyll 3.8.3

此时，在我的电脑打开你上面用Github Desktop克隆打码所在的目录。例如：

然后，点击地址栏输入cmd并按下回车，即在此目录下打开cmd。

在命令行输入jekyll serve，即按此目录生成127.0.0.1测试网站，你对文件所做的修改也会实时体现在这个网站上。此时你在浏览器打开http://127.0.0.1:4000/即可看到所生成的网站~

D:\NoSpace\Shengyan-Coder.github.io>jekyll serve
Configuration file: D:/NoSpace/Shengyan-Coder.github.io/_config.yml
            Source: D:/NoSpace/Shengyan-Coder.github.io
       Destination: D:/NoSpace/Shengyan-Coder.github.io/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
                    done in 6.39 seconds.
  Please add the following to your Gemfile to avoid polling for changes:
    gem 'wdm', '>= 0.1.0' if Gem.win_platform?
 Auto-regeneration: enabled for 'D:/NoSpace/Shengyan-Coder.github.io'
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

调试结束，在命令行按下Ctrl+C并输入Y，按回车，再输入jekyll clean，清除调试所产生的缓存文件。

2.5 最后记得推送代码到Github

调试结束，只有把代码推送(Push)到Github，才会真正生效。
从桌面打开Github Desktop 左下角点击commit to master，再点右方中部的蓝色button：push xxx，稍等片刻即可。

3. 拥有属于自己的域名 (栗子：腾讯云)

你可能会嫌你的网站域名太长——形如xxx.github.io。此时你需要注册一个域名。我以腾讯云为例介绍域名部署过程，至于阿里云等操作类似。之后我们使用Github pages里的enforce HTTPS功能，使你的域名看起来更具有安全感。

3.1 注册域名

打开腾讯云域名注册网站，先点击右上角扫码或者注册账号登陆，不在此赘述。
输入你希望的域名名称，查询并选择合适的价格购买即可，一般九块十块的就可以。

3.2 CNAME域名解析设定

购买成功后，点这里进入域名管理控制台。
点解析，进入域名解析设置。

添加如下两条CNAME解析记录。xxx.github.io用你的Github用户名.github.io代替即可。

$\color{brown}{关于CNAME的解释：}$ 如果需要将一个域名指向另一个域名，再由另一个域名提供IP地址，就需要增加CNAME记录。

最后点击保存。

3.3 利用Github pages将网站设置为HTTPS

此时需要打开Github.com，打开你博客所在的仓库你的Github用户名.github.io，点击右上方Settings打开设置。

往下滑，找到Custom domain这个设置项。输入你所注册的域名，我这里是wangsheng.tech。再点击save保存对该项的更改。然后点选下方的Enforce HTTPS项，即强制HTTPS，可能需要等待一天的时间。

如果Enforce HTTPS这一项不能被选中，请清空Custom domain里的域名，重新输入你的域名，点击save，即可。

4. Google搜索收录指南

博客是希望被多数人看见的，最快捷的途径莫过于被搜索引擎收录。百度的收录需要一些时日，而Google显得相对友好。你可以打开网站谷歌搜索控制台登录并验证提交你的域名加快Google收录，一般隔天会在Google搜索结果中看到你自己的网站。

5. 说在最后

这篇文章有点啰嗦，还是希望所有人都能从中学到搭建博客的简单方法。你可以访问我的博客@胜言获取更多内容。
另外，国内在某些省份访问Github会显得很慢，这也导致你的博客被这些童鞋访问的时候会加载得很慢。腾讯亲儿子：Coding(扣钉)可以解决这个问题。它的功能与Github相似，你把代码Push到Coding，开启静态网站功能，把域名填好，再添加域名解析就好了，国内访问很快的。
关于Coding Pages搭建博客，你可以看这篇：

使用双仓库+多路解析解决Github Pages无法被百度搜索收录的问题。

$\color{brown}{THANKS.}$