博客搭建录

折腾了整整十多天,终于把博客整得差不多了。记录一下搭建的过程吧,就当是一个十分啰嗦的、面向小白的教程了。如果你不是纯新手,我建议你使用桌面端浏览器,并在左边的目录树里选择你感兴趣的条目。


本地配置

博客框架的选择还是挺重要的,根据你自己的能力和精力来选择吧。主流的框架分两大类:静态博客和动态博客。选择好了就要配置一个适合自己的写作环境,让自己能够舒舒服服地发布文章。

博客框架选择

静态博客

嘛,所谓静态博客就是没有数据库等后台系统的博客框架。由于只有 html、css、js 以及图片等静态资源,所以简单、性能高,也不吃服务器资源,甚至能依附于 Github 的仓库(符合一定条件就可以把仓库名当作域名来使用)。目前比较流行的静态博客有 Hexo、Jekyll 等。

动态博客

那么动态博客呢,就是有数据库等后台系统的博客框架啦。“动态”往往由 PHP、Java(JSP)等程序来实现,动态博客因此获得了很多静态博客无法实现的操作,例如用户系统、评论系统等。PHP 这种就是在 .php 文件中事先写好很多固定的 html 属性,然后嵌入 PHP 代码,借由服务器上的 PHP 解释器生成动态的 html 属性,最后用户访问 .php 页面就跟访问正常的 html 文档没差别了。目前比较流行的动态博客有 WordPress 等。

作出选择

最终我选择了较为简单的静态博客框架 Hexo,因为它真的很简约。Hexo 运行于强大的 Node.js 平台,支持 markdown 语法。它能够根据命令将 markdown 文章归档并渲染成静态网页,还能在本地建立临时服务器进行预览。评论系统可以依附于 Github 的仓库的 Issues 栏目,虽然网络状况差时只能玄学加载,但是也够用了。动态博客稍显复杂,目前我也不是很有时间和精力去维护动态博客。说到底,博客的重心还是应当放在优质的文章上嘛。

写作环境搭建

更安装 Node.js 平台

  • 选好了博客框架后,就要开始折腾写作环境了。我 PC 上使用的是 Manjaro,这是 ArchLinux 系列的一个开箱即用的发行版,可以用包管理工具直接下载安装 Node.js,不过个人更推荐使用 nvm 这种 Node.js 的版本控制工具来安装 Node.js。如果你使用的是其他系统,你需要先到 Node.js 官网 寻找安装包。注意:过高版本的 Node.js 会与 Hexo 产生兼容性问题,建议安装 v12 的 Node.js(比较稳定,贴合 Hexo 的环境)。安装好之后进命令行并键入 node -v,有版本号输出即为安装成功,否则需要把放有 node 可执行程序的文件夹目录写进环境变量。

初始化 Hexo

  • 根据 Hexo 官网 的教程,对博客初始化:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    # 安装hexo
    $ npm install hexo-cli -g
    # 新建文件夹blog并在其中初始化博客
    $ hexo init blog
    # 进入文件夹
    $ cd blog
    # 安装各种依赖模块
    $ npm install
    # 安装本地Hexo服务器
    $ npm install hexo-server --save

预览博客

  • Hexo 初始就建好了一篇 hello-world.md 文章(如果没有就执行 hexo new [layout] <title> 新建一个,比如 hexo new firstlayout 可选,不指定就是 post),默认会使用自带的 landscape 主题。键入以下命令,你就能在 localhost:4000 这个网址看到博客:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # 以下的clean,generate,server可以分别简写为cl,g,s
    $ cd blog
    # 清理生成的网页
    $ hexo clean
    # 根据markdown文章以及配置生成网页
    $ hexo generate
    # 在本地的4000端口建立网站
    # 附加参数 -s [端口号] 也可以在其他端口建立
    $ hexo server

文件说明

blog 文件夹下会有这样几个文件 / 文件夹:
folders-files

  1. _config.yml 是 Hexo 的配置文件,很重要。
  2. .deploy_gitpublic 文件夹中的内容一致,还多出来一个 .git 文件夹——对,这是 Hexo 生成网页之后用于自动推送到远端服务器 / Github 仓库的本地仓库,它与 hexo deploy 这条命令有关系。
  3. node_module 是用于放置 npm 安装的 Node.js 模块的文件夹,当你想要在博客中实现某种功能的时候需要安装对应的模块。
  4. public 是在执行了命令 hexo generate 之后生成的目标网页资源文件夹。
  5. scaffolds 下放的是模板,亦即是上面 hexo new [layout] <title> 指令中的 layout
  6. source 下放的是 markdown 文章,我们主要就与它打交道。
  7. themes 下放的是主题,折腾最多的地方就在这里。
  8. 其他几个文件 / 文件夹在博客没出问题的情况下最好不要去动,都是自动管理的。

(ゝ∀・) 如果你成功地做到了这里,那么其实已经完成一半了。


远端部署

目前为止,我们只是在本地开放了临时服务器并简单预览了一下博客而已,你只能够自娱自乐地让局域网内的其他访客看到你的博客(通过访问你在局域网内的 IP:4000号端口)。那么,如何将博客部署进广域网,让大家都能看到呢?这里有两种方案:

  • 把生成的网页部署到 Github 仓库中(较简单、加载慢、不稳定)
  • 把生成的网页部署到云服务器中(较复杂、可控性高、稳定)

如果你用的就是 Hexo,那么这两种方法的本质是一样的,都是利用强大的 Git 进行操作的。这篇文章我不会详细展开 Git,以后我可能会出相关的教程。我先向你简单介绍一下 Git,然后你根据自己的能力以及精力选择使用哪种部署方式。

部署原理

认识 Git

Git 是 Linus 大神当初用于开发 Linux 内核的作品,它是一款用于软件的版本控制和团队协作的分布式版本控制系统。版本控制方面,任何放在 Git 仓库下的文件都能被这个工具用差异比较来创建快照记录,你可以在任何时候回退到 Git 提交记录的历史节点。团队协作方面,在中心主机上存在着一个裸仓库,其中只有提交记录而没有具体文件,团队成员需要将本地的 Git 仓库关联到裸仓库,向其推送或拉取提交和分支记录,以此达成协作开发。中心主机可以是公司局域网内的一台服务器,也可以是公网上的云服务器,更为常见就是像 Github 这样的网站。

想要部署博客,就必须把它安装到自己的计算机上。去 Git 官网 就能找到它的下载链接。以后下载 Github 各种源代码也需要用到它,装一个绝对不吃亏哦。只是国内下载速度很慢,你得自己想办法了。类 Unix 系统也可以用包管理器安装。

Hexo 部署过程

之前提到,Hexo 文件夹下有个 .deploy_git 文件夹,它即是本地仓库。在执行 hexo deploy 之后,Hexo 会生成 public 文件夹(相当于 hexo generate),并将其复制一份到 .deploy_git 中,随即生成以时间为描述的一份新提交记录。接着,Hexo会将本地仓库的提交记录推送到中心主机的裸仓库上。当裸仓库收到提交记录后,就能通过一些方法生成网页资源并发布到网站上。

部署至 Github

Github 是一个知名的开源社交网站,很多优秀的作品,包括 Hexo,其源代码都被公开到了这个网站上。在 Github 上建立好账户之后,你就能建立自己的仓库了。这个仓库就包含了上面屡次提到的裸仓库。Github 会把仓库中最新的提交展示给你看,当然你也可以查看不同分支的最新提交状态。

Github 提供了一个服务,那就是只要你按照 ×××.github.io 这样的名称命名你的仓库,并且在仓库里部署了静态的网页资源,它就能把这个仓库当作是一个网站显示网页内容,域名即为 ×××.github.io

配置 Github

  • 创建好 Github 账户之后,在 Github 中新建一个仓库,名称当然是 ×××.github.io。注意:执行 hexo deploy 之前仓库里不能提交任何东西,因为这样会形成冲突的提交记录。如果手残提交过诺干次,最简单的方法是删库然后跑路重建。

  • 为了让 Github 能认出你是仓库的主人,你需要在 Github 里放上公钥。下面的命令用于生成密钥对(如果你是 Windows10 系统,需要右击调出 Git Bash 进行操作):

    1
    $ ssh-keygen -t rsa
  • 一路确认后(不要设置密码),可以看到你的用户文件夹下有个 .ssh 文件夹,将其中 id_rsa.pub 这个文件中的文本复制到剪切板。打开 Github,点击头像下的 settings,选择 SSH and GPG keys 那个选项卡,选择 New SSH key 并把公钥粘贴进去。

配置 Hexo

  • 安装部署工具

    1
    2
    $ cd blog
    $ npm install hexo-deployer-git --save
  • 更改配置文件 _config.yml

    1
    2
    3
    4
    deploy:
    type: git
    repo: https://github.com/你的Github账户名/×××.github.com.git
    branch: master

尝试部署~Github

  • LINK START!

    1
    2
    3
    $ cd blog
    $ hexo clean
    $ hexo deploy
  • 这时候去 ×××.github.io 这个网址去看看,不出意外的话应该就能看到发布好的博客咯!

部署至云服务器

Github 提供的服务很优质,也救济了不少穷苦博主。但是 Github 毕竟是美帝的网站,访问文档还好,那个图片的加载速度实在让人不敢恭维。如果你是用 Github 部署博客的,你应当去找一个图床(存放图片的服务器),并把博客里大部分的大图链接到图床中。图床是第三方提供的,免费图床也会出不少问题。而且现在由于一些不能说的原因,很多地方甚至没法访问 ×××.github.io。但是——

喂,隔壁超市薯片半价啊! 阿〇云现在云服务器免费送半年啊!

服务器推荐选择很稳定的 CentOS 7,也可以选择适合开发的 Ubuntu,主要看你是否有其他需求。云服务器的配置需要你对 GNU/Linux 系统有所了解,具体不展开讲了,我们这里就说一些必要的。但是在那之前我还得提一句:

配置服务器即是畅游地狱,即使是这样你也要前进吗?

选择了这条路需要学习很多东西,你必须要记住的有两条原则:

  • 经常拍快照 —— 只要有重来的机会,就没有什么好怕的。
  • 一切的“果”都可以用某个“因”来解释 —— 一定有办法可以解决问题。

废话说多了,我们开始吧。

远程登录云服务器

  • 申请并且选择好云服务器系统之后,通常运营商的控制台页面里可以看到服务器的运行状况以及其公网固定 IP 地址。这个 IP 地址很重要,如果现在你还没有自己的域名,建议你在计算机的 hosts 文件里写下这个 IP 地址的别名,以后使用命令行会方便得多。现在就假设你在 hosts 文件里将该 IP 记为 myserver 吧。

  • 类 Unix 操作系统直接用命令行界面远程登录就好,真正的原生体验:

    1
    $ ssh root@myserver

    然后会让你输入密码。难道每次登录都要输入这个密码吗?你可以跟上面配置 Github 密钥时一样,在你本地计算机上运行这个命令:

    1
    $ ssh-keygen -t rsa

    然后将用户文件夹下 .ssh/id_rsa.pub 这个文件的文本复制出来,粘贴到服务器的 /root/.ssh/authorized_keys 文件中。这时候服务器就能通过你的公钥跟你握手,比输入密码更安全哦。

  • Windows10 操作系统可以去下载一个 Xshell,注意:要用邮箱申请非商业、个人用的免费版,省得以后看到试用期到了就昏厥过去。Xshell 简单配置一下服务器地址后就能自动登录,还是挺方便的。

配置Web服务器软件

  • Web 服务器软件提供让别人访问网站的功能。简单来说,Web 服务器指定你服务器上的一个文件夹,这个文件夹中的各种 html 文档就会映射到你的 IP:80端口/443端口 上。访客访问你的 IP 地址或域名,就可以查看这些 html 文档。一般来说,80端口 走 http 协议,443端口 走 https 协议。Web 服务器有很多,这里推荐 Nginx ,它是毛子开发出的一款强劲的反向代理 Web 服务器,非常适合搭建个人网站(Apache 之流相比之下太过臃肿)。

  • 登录进 CentOS 7 服务器之后,键入以下命令来安装 Nginx,遇到提示键入 y 确认就行:

    1
    $ yum install nginx

    安装好之后,键入以下命令来编辑 Nginx 的配置文件:

    1
    $ nano /etc/nginx/nginx.conf

    你会发现你进入了 nano 这个文本编辑器的操作界面。我不建议新手上来用 VIM,对于新手来说会非常痛苦(但是你迟早得学会 VIM)。相比之下 nano 有很好的界面提示,你跟据提示确认一下 root 字段的值就好(当然你也可以改到其他地方):

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    ...
    server {
    ...
    listen 80; # 监听走http协议的80端口
    server_name localhost; # 这里填你以后申请的域名
    root /var/www/html; # 这个目录下放你生成的网页
    index index.html index.htm; # 默认首页文件,不需要改
    ...
    }
    ...
  • 现在你知道博客的根目录就设立在 /var/www/html 下了,没有找到的话你也可以手动更改 root 字段的值,并且使用 mkdir 命令新建对应的文件夹。接下来,键入以下命令来控制 Nginx:

    1
    2
    3
    4
    $ nginx # 启动
    $ nginx -s quit # 有序关闭
    $ nginx -s exit # 强行关闭
    $ systemctl status nginx.service # 查看运行状态

    启动时没有输出就说明启动成功了。去服务器运营商的控制台确认一下是否放行了 80端口,没有的话就根据运营商的提示在安全组中添加入方向的 80端口 访问规则就行。注意:确认服务器上是否开启了防火墙,如果开着就关掉(虽然运营商的安全组也能起到防御作用,还是建议去学一下如何配置防火墙并开放 80端口):

    1
    $ systemctl stop firewalld.service
  • 以上折腾完之后,就能在任何连接到互联网的、装有浏览器的终端上访问你的服务器了。在浏览器的地址栏里键入 myserver 或者你服务器的 IP 地址,就能看到 Nginx 的欢迎界面。

自动化部署

  • 如果你之前认真看了我对部署原理的描述,聪明的你就应该知道云服务器也是可以作为 Git 的中心主机的,也就是说可以在这上面放置 Git 裸仓库。裸仓库可以设置钩子触发脚本,只要配置正确,你就可以像部署进 Github 仓库一样来将 Hexo 生成的网页资源部署进服务器上 /var/www/html 文件夹中。

  • 在云服务器上配置 git 用户:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    # 新增一个名为git的用户
    $ adduser git
    # 配置git用户的密码
    $ passwd git
    # 切换到git用户
    # 注意:git用户权限很低,不过你随时可以用exit返回root用户
    $ su git
    # 进入git的home文件夹
    $ cd ~
    # 新建.ssh文件夹
    $ mkdir .ssh
    # 创建保存公钥的认证文件
    $ touch .ssh/authorized_keys
    # 编辑文件,把上面屡次提到的本地id_rsa.pub文件中的文本复制到这里
    $ nano .ssh/authorized_keys
    # 更改权限,保证安全
    $ chmod 700 -R .ssh/
  • 然后在本地打开命令行,键入以下命令进行登录测试(日常登录时可以不用 -v 参数):

    1
    $ ssh -v git@myserver

    不出意外的话是能够以 git 这个用户的身份登录进去的,登录后不会看用户身份的话也可以用 whoami 命令看看自己是谁。

  • 配置Git裸仓库:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    # 使用root用户安装Git
    $ yum install git
    # 将Nginx默认的网站根目录清理干净(你也可以移到其他地方做备份)
    # 注意:这个指令很危险,一定要确认好了再回车
    $ rm -rf /var/www/html/*
    # 更改博客根目录的所有者
    $ chown git:git -R /var/www/html
    # 切换到git用户,必须用git创建各种文件才能保证有修改文件的权限
    $ su git
    # 进入git的home文件夹
    $ cd ~
    # 创建裸仓库,你也可以取其他名字,最好在名字后面加上.git
    $ git init --bare blog.git
    # 创建触发脚本,当Git仓库收到提交时就会执行这个脚本
    $ touch blog.git/hooks/post-receive
    # 增加可执行权限
    $ chmod +x blog.git/hooks/post-receive
    # 编辑脚本
    $ nano blog.git/hooks/post-receive

    脚本的内容:

    1
    2
    #!/bin/sh
    git --work-tree=/var/www/html --git-dir=/home/git/blog.git checkout -f
  • 与部署至 Github 不一样的是,你要这么配置本地 blog 文件夹下的 _config.yml

    1
    2
    3
    4
    deploy:
    type: git
    repo: git@myserver:/home/git/blog.git
    branch: master
  • 不出意外的话,一长串的生成信息后应该会有类似这样的输出:


    To myserver:/home/git/blog.git
    94f0edc..e4488cd HEAD -> master
    分支’master’设置为跟踪来自‘git@myserver:/home/git/blog.git’的远程分支’master’。
    INFO Deploy done: git

    一点说明:

    1. 分支master 指的是 .deploy_git 这个本地仓库的主分支;
    2. 远程分支master 指的是 blog.git 这个远端裸仓库的主分支;
    3. 设置跟踪是 Git 的一条命令,简单来说就是把本地和远端绑定在一起了,这样本地仓库就能知道把自己推送到哪里去。

尝试部署~云服务器

  • LINK START!

    1
    2
    3
    $ cd blog
    $ hexo clean
    $ hexo deploy
  • 去看看云服务器下的 /var/www/html 文件夹下有没有生成网页资源,如果没有的话可以重复几次上面的命令。还是没有的话就把 /home/git/blog.git 清理掉,重新初始化裸仓库。还要确认 /var/www/html 文件夹为空,并且保证它对 git 用户有读写权限。如果 /var/www/html 下生成了跟本地 blog/public 文件夹下一样的网页资源,那么就赶紧去浏览器访问看看吧,开着 Nginx 的话一定能成功显示博客的。


仍未结束

如果你成功地做到了这里,也不枉我花了两天的时间肝出这篇教程了。但是你仍有很多重要的事情没有做。限于篇幅,我只能给你作出简单的指引并说明其注意事项,希望你能够勇于折腾挑战,自己去搜索相关教程来完善这些事项吧。

挑选并配置主题

Hexo 的主题非常多,去其官网的推荐页可以看到很多漂亮的主题。挑选一个你自己心仪的主题吧,不过在挑选时你不仅要看是否美观,更应该考虑的是 功能和文档是否齐全 。我目前使用的是 Stun 主题,它的文档相当齐全,作者也会很热心地与人交流。配置主题真的非常折腾人,好的主题及其文档可以减轻你很多负担。当然,如果你是前端设计大手子,那你可以不用太在意这个,想怎么改都可以。另外,如果你会用 Git,建议你使用 Git 的分支功能对主题进行配置,这样升级主题的时候也会方便且安全得多。

给你的网站加密

前面有说过 80端口 对应 http协议443端口 对应 https协议。你可以去查查这两种协议的区别。简单来说,启用 https协议 能够加密访客与网站之间的连接,不过必须要有第三方机构(CA)的认证才能设置。你要做的事就是给 CA 交钱。嘿,一年几千块呢,比云服务器都贵,好在我们有免费的认证机构,看下面:

  • 如果你将博客部署在 Github 上,去搜索相关的设置方法,很简单就可以完成了,Github 在这方面功夫做得很足。

  • 如果你将博客部署在云服务器上,去搜索 Let's Encrypt。它是 Mozilla 等机构牵头的项目,旨在提供免费的认证服务,不怎么强劲却非常适合个人网站的加密。它的官网上会建议你在服务器上安装 certbot 这个软件包,根据文档一步步做吧。注意:certbot 依赖于 Python,你要好好解决 Python 及其包管理器 pip 的版本问题。为了保持 CentOS 7 的稳定性,服务器运营商提供的软件源的各种软件版本往往都比较旧,你需要自己去更换源并安装所依赖的软件版本。配置好了别忘了防火墙和安全组都要开放 443端口 才能让别人访问。

绑定域名和备案

如果你已经满足于 Github 的那种 ×××.github.io 的域名的话,那你可以不用管这条。

  • 不管你是哪种部署方式,你都可以给你的博客绑定一个域名。在相关机构购买好心仪的域名之后就可以添加解析了。Github 的话需要用 CNAME 记录来给你的 ×××.github.io 添加别名;云服务器的话基本运营商都有一条龙服务,照着做就好了。运营商可能还会要求你备案,需要10天左右的审批,好好按要求去办理吧。

魔改你的主题

这个并不是必须的,但是能够让你的博客变得更加美观。我博客里藏着的贤狼就是我魔改出来的,原主题是没有这样的功能的。你必须要对前端知识有些许了解,并且最好使用 Git 的分支功能对主题进行魔改,以便回退到没被你搞坏的节点。如果你选择的主题比较优质的话,它模块间的耦合度应该会很低,并且作者会给你留下自定义的空间,比如能够让你自定义 css 样式或者是页面布局之类的。

给我提意见

写到这里的时候我发现我第一篇正式的博文都有 6k 字了,我自己都觉得这种胎教式写法很啰嗦。这么多字难免会有不少错别字或是逻辑错误,如果你在配置的过程中遇到了某些奇怪的东西,烦请你在下方留言或者是 扣我邮箱,我会尽快地修正这些错误。

最后

(`ε ´ ) 把你的友链给我交出来!*** 这是必须要做的 ***


一定要认真地喜爱自己所喜爱的事物。这是第二片星星。