利用Hexo搭建GitHub托管的个人博客


title: 利用Hexo搭建GitHub托管的个人博客
date: 2019-01-04 23:58:32
tags:

  • BlogSet-up
    category:
  • Blog

心血来潮,2019年伊始的第四天,我要搭建我自己的个人博客,作为个人工作学习和生活的一种记录方式。

这前面的路或许会有困难,但我喜欢“挑战成功”的快感!

本博文部分语句和教程是适用于Windows平台的,mac及其他平台请依据官方文档进行操作,本博文较长,请耐心阅读并多多实践。欢迎大家留言,提出问题,ありがとうございます。

一、前置准备工作

本博文将叙述如何基于Hexo静态博客生成器快速搭建托管于GitHub的自建博客。

首先,我们要在本地电脑端配置环境,并完成本地个人博客的搭建,然后申请GitHub账户和仓库,并上传本地个人博客到仓库,最后申请域名“XXXXX.com/XXXXX.cn” 并解析到对应的GitHub地址“XXXXX.github.io” 。

本文所示操作方法都是在Windows环境下利用Git Bash Shell进行的。

本文中出现的所有下载连接如果无法进行下载或下载速度极慢时,可以到文末找到对应的百度云盘链接。

首先我们要安装几个工具:Git、Node.js、hexo和hexo-git(第二节 3.2中)上传工具。

1. 基础知识

个人博客,可以分为传统博客和自建博客两种。

传统博客像是新浪博客、网易博客和QQ空间等,主要依托于自身强大的博客门户运营能力,能够为用户提供安全便捷的博客环境,缺点就是兼容性不够强,并且个性化定制能力稍差。

自建博客根据服务器管理方式也可以分为两种。一种是基于第三方服务器托管的自建博客,像GitHub这种;另一种是基于自有服务器的博客。

自建博客根据博客生成器来分也可以分为两种,分别是动态博客和静态博客。其中,动态博客以WordPress、FarBox、Ghost等为代表。静态博客以Hexo、Jekyll、Octopress、Hugo为代表。

以下为动态博客和静态博客的几点主要区别:

  • 资源占用上,静态的相比动态占用服务器资源少,还可以托管在Github Pages上;
  • 发布更新操作上,由于静态博客没有管理后台,所以发布更新内容要比动态博客繁琐;
  • 访问速度上,由于静态博客没有数据库,所以访问速度更快;
  • 安全性上,静态博客相比动态博客免疫了很多Web攻击套路;

除了Hexo以外,还有其他的静态博客生成器推荐,见文章《11个最流行的静态(博客)网站生成工具》。

2. Git配置

2.1 Git Bash Shell下载

Windows平台: https://gitforwindows.org/
Hexo提供的Git-SCM网址的Git Bash shell: https://git-scm.com/downloads

2.2 Git安装验证

为了确保安装成功,我们可以在Bash Shell或Windows CMD中,使用以下代码进行验证:

git version

若成功安装,则会提示以下结果:

git version 2.20.1.windows.1

3. Node.js配置

3.1 Node.js下载

Windows平台: https://nodejs.org/en/

3.2 Node.js安装验证

为了确保安装成功,我们可以在Bash Shell或Windows CMD中,使用以下代码进行验证:

node -v

若成功安装,则会提示以下结果:

v10.15.0

4. Hexo配置

4.1 Hexo安装

成功安装Git和Node.js之后,(关闭窗口并重启命令终端)则可以使用npm命令语句安装Hexo:

npm install -g hexo-cli

4.2 Hexo初始化

为本地博客创建文件夹,以下代码中的”XXXXX”为该文件夹的名称,为避免出错,请勿输入中文。

cd ~/                          //跳转到根目录
mkdir XXXXX                    //创建一个文件夹
hexo init XXXXX                //初始化该服务器文件夹
cd XXXXX                       //跳转到该服务器文件夹
npm install                    //博客环境安装
hexo g                         //博客生成
hexo s                         //博客服务器开启(本地预览用)

4.3 注意事项

在每次重新打开命令窗口,并生成本地服务器预览页面之前,都必须跳转到该服务器的文件夹中。即:

cd XXXXX                       //跳转到该服务器文件夹

到此步骤为止,本地服务器配置已经全部完成。可以根据hexo官方文档给出的参数格式说明来对博客进行个性修改,这些请看第3节。

二、上传到GitHub仓库

在这部分中,我们将会申请到一个Github账户,并建立好对应博客代码的储存仓库,也会将本地生成的公钥SSH Key中。

1. GitHub账户申请及Repository(仓库)建立

1.1 GitHub注册

在这里偷个懒,引用别人的文章作为参考:
GitHub注册
GitHub官方网址:https://github.com

1.2 Repository建立

在创建Repository的时候一定要注意,仓库名应该为:XXXXX.github.io
这个XXXXX使用你的GitHub帐号名称代替,这是固定写法。

比如我的名字是liewzheng,则我对应的仓库名称应该是:liewzheng.githug.io
不然在后续上传本地博客到仓库之后,会发现仓库无法打开的情况,因为DNS寻址会不成功。

2. SSH Key配置

此步骤是为了让Github给你的电脑访问授权,如果没有此步骤,则无法上传到Github。

2.1 本地生成SSH Key

请执行以下命令:

ssh-keygen

三次回车之后,可以生成id_rsa.pub文件,这里面就是SSH key的内容,然后使用Vim编辑器打开这个文件,复制里面的全部内容

vim ~/.ssh/id_rsa.pub

然后在键盘上敲击以下命令并回车退出Vim编辑器:

:q

附带Vim编辑器的其他使用教程:

  1. 《Vim入门基础》:https://www.jianshu.com/p/bcbe916f97e1

2.2 拷贝到GitHub记录该Key

在自己的GitHub主页,点击右上角头像,点击Setting,点击左侧边栏的SSH and GPG keys,点击New SSH key

然后将SSH-key粘贴到Key文本框中,在Title文本框键入对该Key的备注并保存即可。

2.3 验证SSH Key

回到命令行,输入:

ssh -T git@github.com

如果得到以下提示,则说明你已经配置好SSH-Key了。

Hi! You've successfully authenticated, but GitHub
does not provide shell access.

3. 上传到GitHub仓库

3.1 本地参数修改

首先找到本地博客的服务器文件夹下的_config.yml文件,然后打开并滑动到最底下,其原始文件应该是如下的:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

然后我们要对其进行上传参数修改,XXXXX为你对应的账户名:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git                   #为Git,旧写法为github
  repo: git@github.com:XXXXX/XXXXX.github.io.git        #输入你对应的Git仓库地址,SSH写法
  branch: master              #可以为其他分支,默认为master

3.2 上传插件安装

接下来安装hexo对应Github的上传插件:

npm install hexo-deployer-git --save

显示如下文字说明插件安装成功了:

npm WARN deprecated swig@1.4.2: This package is no longer maintained

> fsevents@1.2.4 install /Users/apple/liewzheng/node_modules/fsevents
> node install

[fsevents] Success: "/Users/apple/liewzheng/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
+ hexo-deployer-git@0.3.1
added 68 packages from 33 contributors, updated 1 package and audited 5870 packages in 12.563s
found 1 low severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details

3.3 用户名称及邮箱配置

(更新日期:2021年2月5日)

向cmd或者terminal内设置两个变量,分别是 user.nameuser.email

  git config --global user.email "you@example.com"
  git config --global user.name "Your Name"

三、博客主题配置

1. 选择博客主题

本步骤需要在Hexo的官网上进行主题挑选及预览,然后再跳转到对应的GitHub仓库中下载主题Zip包,并解压放在对应的位置/themes/下面。

然后在根目录下找到文件_config.yml

并在其文件下方XXXXX处替换刚下载好的主题名称(其文件夹名称):

theme:   XXXXX

2. 主题配置

请打开对应的主题文件夹下的\_config.yml文件,如:

XXXXX\themes\hexo-theme-pln-master\_config.yml

然后对照着Hexo对config.yml文件的说明进行编辑。

官方文档如下:
配置

3. 注意事项

大概是因为Hexo免费的原因,其主题很多都是资源上传,且无人维护的,因此需要多下载几个主题,一个一个进行尝试,在本地博客服务器上尝试到所有网页跳转正常无BUG之后再进行主题配置,按需修改。

四、博客撰写及文件更新

1. 博客撰写

使用Hexo创建的静态网页之后,在编写博文之时,一般都是使用轻量级标记语言(MarkDown,文件名如:XXXX.md)来编写的。然后利用脚本语言将md格式文件自动转换成html5文件,并上传到服务器仓库。

这时候,熟练使用MarkDown这种纯文本文档语言来编写博客,是为广大博客爱好者提供了便利的。

由于MarkDown是纯文本文档,在文章撰写中无法使用图片直接插入和预览功能,因此最好选择合适的稳定的图库网站来保存自己的图片,并生成对应url,再使用如下引用方法来插入图片:

![说明](url地址)

url地址的填项也可以是相对(物理)地址。

科普
相对地址和绝对地址(相对路径和绝对路径)。
这一点,学计算机和电子的人可能会比较懂。
详细科普还是请参考链接6吧。

另外,推荐使用Atom文本编辑器对本博文中出现的各种文件进行编辑,自带各种显示优化,地址如下:
https://atom.io/

更多MarkDown的使用方法,请循:

  1. Markdown编辑器editor.md的使用
  2. Github上README.md的简单使用方法

2. 文件更新(利用Git Bash Shell)

再次更新本地服务器文件,并保存生成预览之后,如果想要更新对应git仓库里的文件,最好每一次都按照以下代码进行操作,避免出现不必要的意外。

hexo clean
hexo g
hexo d

之所以强调需要每一次都这样操作,是因为本人就有过偷懒,在本地博客预览成功后选择直接部署,都没有提示错误,也没有部署成功(输入对应网址后无法显示更新)。

3. 注意事项

可以在本地博客服务器开启的情况下,实时修改服务器文件并刷新网页进行查看,这样创建文章和预览网页的效率有极大的提升。

五、博客展示

1. 域名申请

域名申请比较靠谱的,可以选择国内的阿里云、百度云和腾讯云等等。

由于此步骤较为简单,不做多介绍。域名申请参考文章如下:

  1. 免费申请域名
  2. 教你如何申请域名和解析域名

2. 域名解析

域名解析是指将指定的域名与指定的服务器或其他地址绑定在一起,能够在DNS服务器中被检索得到,通过输入域名A并跳转到指定位置。

有两种方法可以用来将自己的域名指向到Github Pages:

  • A类型解析:将域名定向解析到一个IPv4地址,只要将获取到个人博客的IPv4地址就可以定向解析了
  • CNAME类型解析:将自己的域名(定向域名或子域名)指向另一个域名(博客地址)

本人使用阿里云域名解析服务,具体步骤请参考以下链接:

  1. github pages+阿里云域名绑定搭建个人博客
  2. github pages 绑定阿里云域名
  3. github怎么绑定自己的域名?

六、博客个性化

1. 图床服务器

对于博客而言,有两项因素关乎着“我是否需要图床服务器”这项问题:

  1. 本博客是否有数量庞大的访客;
  2. 本博客是否有插入数量庞大的多媒体(动画、视频和图片等等);

对于以上两种因素而言,图床服务器都能够很好的减轻博客服务器的访客压力,减少因为访客众多或者多媒体加载时的网页载入缓慢或崩溃。对于自有服务器的博客而言,图床服务器能够降低租用服务器的流量消耗,加快访问速度。

理论上说,只要另外申请一个服务器,专门用来存放图片的,就能被称作图床服务器。
因此图床服务器也有自建服务器和门户服务器的区别。
你也可以上传到微博相册或者QQ空间相册,然后引用超链接到.md文件里。

本人用阿里云OSS(Object Storage Service,对象存储服务),搭配Mac平台的 iPic插件 ,有兴趣也可以参考一下:
对象存储OSS
在 iPic 中添加阿里云 OSS

然后再推荐个口碑不错的七牛云,注册和使用方法请遵循技术文档吧,链接如下:
七牛云

推荐网友Mashiro的自建图床服务器:
搭了一个图床

其他推荐链接:
免费图床

2. .YML

.YML是YAML语言的文件格式。

YAML是"YAML Ain’t a Markup Language"(YAML不是一种标记语言)的递归缩写。在开发的这种语言时,YAML 的意思其实是:“Yet Another Markup Language”(仍是一种标记语言),但为了强调这种语言以数据做为中心,而不是以标记语言为重点,而用反向缩略语重命名。——摘自wikipedia.org

请自行以Hexo官方针对***_config.yml***文件做出的解释进行.yml学习,并针对个人博客进行适当的修改即可。

七、后续总结

1. 如何GitHub自建博客和自有服务器博客的区别

这个问题,相当于我给自己挖了个坑,之前打算长篇大论来着,发现自己也并没有那么深的体会。

*服务器博客最大的问题是,一般都会有自己的系统。
这样的服务器系统分为两类:应用镜像和系统镜像。

应用镜像的代表是:WordPress、LAMP、Drupal、Node.js、ECShop等等。
系统镜像的代表是:CentOS、Ubuntu、Debian和Windows。

自己管理服务器的话,最好是有一个自己的博客应用镜像,如WordPress,WordPress也是基于CentOS打造的,是功能非常强大的博客和内容管理工具平台。

而GitHub的话更多的是静态博客的搭建,没有操作系统这种东西。

2. 做好更换设备前的备份工作

对了,值得一提的是,如果你准备在多台电脑之间编辑你的博文,最好是能够把本地博客服务器拷贝到U盘或者移动硬盘上面。

假如,尝试着从GitHub再次git clone到本地的话,你会发现里面的内容和本地博客服务器的内容完全不一样。这是因为本地博客服务器使用.md文件进行编辑,之后在hexo d的过程中会把.md文件转换成.html文件,而使用.html文件编辑的话会变得更加复杂。

因此,为了避免在转移到另一台电脑上编辑的时候出现这种尴尬问题,还是备份到U盘更方便。

参考链接

  1. GitHub+Hexo 搭建个人网站详细教程
  2. 在github上搭建hexo个人博客(Linux-Ubuntu)
  3. 搭建个人博客,你需要知道这些
  4. Hexo官方帮助文档
  5. MarkDown
  6. 相对路径和绝对路径

下载链接

  1. 安装工具合集(更新时间2019/01/05)》 提取码:28wj
上一篇:Hexo优化篇:Nginx压缩和缓存


下一篇:基于Hexo+Matery的LuckyBlog开源搭建教程