尚拙

一个分享技术、学习成长的个人博客网站

0%

GitHub + Hexo 搭建个人博客教程

发表于 更新于 分类于 ，

记录一下本网站的搭建过程

一、前言

本教程只针对win10系统，写的比较精简，方便自己以后查看，适合有一定技术基础的人阅读。

本博客基于Hexo+GitHub搭建，也可以使用码云Gitee，原理是一样的。

搭建博客过程其实比较简单，主要是后期主题优化修改比较花时间。

二、准备工作

系统环境：win10系统

1、安装Git

官网https://git-scm.com/

2、安装node.js

官网https://nodejs.org/en/

3、注册一个GitHub账号

官网https://github.com/

登录Github，新建一个仓库，命名为username.github.io，其中username为你的Github用户名。

例如我新建的仓库为raphets.github.io，那么后面我们就可以通过https://raphets.github.io/访问我们的博客。

注意，username必须是你的用户名

三、Hexo环境搭建

官方文档：https://hexo.io/zh-cn/docs/

1、hexo简介

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

2、安装

在任意一个地方新建一个文件夹，用以存放本地博客文件，比如我的是E:\Blog

进入该文件夹，右键选择git bash进入git命令行，输入以下命令

npm install -g hexo

3、初始化

继续输入命令进行初始化

hexo init

5、生成静态文件

继续输入命令生成静态文件

hexo g

6、启动服务

继续输入命令开启本地预览服务

hexo s

此时打开浏览器访问 http://localhost:4000，即可看到内容，hexo环境到此已经搭建完成

7、 hexo常见命令说明

清除缓存文件 (db.json) 和已生成的静态文件 (public)
hexo clean

在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。

生成静态文件
hexo g

每次对博客文件或者相关配置进行了修改，需要执行该命令

启动服务器
hexo s

默认情况下，访问网址为：http://localhost:4000/
可以在本地对修改进行预览。

部署网站
hexo d

将本地博客部署到GitHub上

新建文章
hexo new "article"
新建页面
hexo new page "pageName"

四、将本地博客部署到GitHub

Github地址配置

先配置博客根目录下_config.yml文件的deploy部分：

deploy:
  type: git
  repository: https://username:password@github.com/RaphetS/RaphetS.github.io.git
  branch: master

其中username为Github账号的用户名，password为Github账号的密码。

账号、密码后面的部分为你的仓库地址

发布博客

在博客的根目录的git命令行中，执行hexo -d命令，就把本地博客部署到了Github上了。

过一段时间，访问https://username.github.io就能访问你的博客了，username为你的Github用户名

五、博客美化

hexo 默认的主题比较丑，为了能够更好的装B，我们需要把博客美化一下，显得有逼格一些。

更换主题

https://hexo.io/themes/

这是官方主题网站，你可以去上面找你自己想要的主题。

我用的是Next主题，GitHub地址https://github.com/iissnan/hexo-theme-next

1、下载主题

在博客根目录打开git命令行，输入以下命令

git clone https://github.com/iissnan/hexo-theme-next themes/next

主题会下载到themes文件夹内

2、使用主题

打开博客根目录下_config.yml文件，找到theme配置，设置为next

theme: next

然后使用hexo g重新生成静态页面，hexo s 打开本地服务，可以去localhost:4000/中查看效果了。

六、添加gitment评论系统

Gitment 是作者实现的一款基于 GitHub Issues 的评论系统。
支持在前端直接引入，不需要任何后端代码。
可以在页面进行登录、查看、评论、点赞等操作，同时有完整的 Markdown / GFM 和代码高亮支持。
尤为适合各种基于 GitHub Pages 的静态博客或项目页面。

1、安装Gitment

在你的blog根目录打开git命令行，输入以下命令

npm i --save gitment

2、注册 OAuth Application

首先去OAuth Application来注册一个新的 OAuth Application。

其中Authorization callback URL必须填写博客的地址，比如我的就是https://raphets.github.io/，其他的随便填。

注册之后会得到 client ID 和一个 client secret，后面会用到。

3、Gitment配置

打开theme的_config.yml文件，我的文件目录是themes/next/_config.yml，中间的next就是当前使用的theme的文件夹。

最新版本next主题默认已经集成了Gitment的，我们找到themes/next/_config.yml文件中Gitment配置，进行如下修改

# Gitment
# Introduction: https://imsun.net/posts/gitment-introduction/
# You can get your Github ID from https://api.github.com/users/<Github username>
gitment:
  enable: true
  mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
  count: true # Show comments count in post meta area
  lazy: false # Comments lazy loading with a button
  cleanly: true # Hide 'Powered by ...' on footer, and more
  language: # Force language, or auto switch by theme
  github_user: RaphetS # 修改为你的Github用户名
  github_repo: RaphetS.github.io # 写一个你的Github公开的仓库，到时候评论会作为那个项目的issue，这里用的是博客的项目
  client_id: ae52f8c2g50g3dag73 # 上一步申请的ClientID
  client_secret: a54ag44ag784te4g85e4g # 上一步申请的Client Secret
  proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect
  redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled

其中github_user、github_repo、client_id、client_secret要换成你自己的。

4、初始化评论

页面发布后，你需要访问页面并使用你的 GitHub 账号登录（请确保你的账号是第二步所填 repo 的 owner），点击初始化按钮。

之后其他用户即可在该页面发表评论。

5、关闭某个页面的评论功能

以上步骤集成评论功能之后，发现所有的页面都有评论功能，比如标签页面、分类页面也有评论功能，但是不想要，如何关闭呢？

在页面的 Front-matter 里添加 comments 字段，并将值设置为 false。如下所示：

title: 目录
date: 2019-03-21 17:00:15
type: "categories"
comments: false

即新建文章的md文件的头部，添加comments字段，并且设置为false。

6、问题

登录报错，Object ProgressEvent

原因：貌似是作者的服务器停掉了。

解决办法：

找到themes\hexo-theme-next\layout_third-party\comments\gitment.swig文件，

将以下代码

<!-- LOCAL: You can save these files to your site and update links -->
    {% if theme.gitment.mint %}
        {% set CommentsClass = "Gitmint" %}
        <link rel="stylesheet" href="https://aimingoo.github.io/gitmint/style/default.css">
        <script src="https://aimingoo.github.io/gitmint/dist/gitmint.browser.js"></script>
    {% else %}
        {% set CommentsClass = "Gitment" %}
      <link rel="stylesheet" href="//imsun.github.io/gitment/style/default.css">
      <script src="//imsun.github.io/gitment/dist/gitment.browser.js"></script>
    {% endif %}
<!-- END LOCAL -->

替换为

<!-- LOCAL: You can save these files to your site and update links -->
    {% if theme.gitment.mint %}
        {% set CommentsClass = "Gitmint" %}
        <link rel="stylesheet" href="https://aimingoo.github.io/gitmint/style/default.css">
        <script src="https://aimingoo.github.io/gitmint/dist/gitmint.browser.js"></script>
    {% else %}
        {% set CommentsClass = "Gitment" %}
        <link rel="stylesheet" href="https://jjeejj.github.io/css/gitment.css">
        <script src="https://jjeejj.github.io/js/gitment.js"></script>
    {% endif %}
<!-- END LOCAL -->

七、其他

设置「阅读全文」

在首页显示一篇文章的部分内容，并提供一个链接跳转到全文页面是一个常见的需求。 NexT 提供三种方式来控制文章在首页的显示方式。 也就是说，在首页显示文章的摘录并显示 阅读全文 按钮，可以通过以下方法：

1、在文章中使用 手动进行截断，Hexo 提供的方式

2、在文章的 front-matter 中添加 description，并提供文章摘录

3、自动形成摘要，在主题配置文件theme/next/_config.yml 中添加

auto_excerpt:
  enable: true
  length: 150

默认截取的长度为 150 字符，可以根据需要自行设定

首页文章添加阴影效果

修改custom.styl 文件，具体为themes/next/source/css/_custom/custom.styl，添加一下代码

// 主页文章添加阴影效果
.post {
   margin-top: 0px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

添加网页进度加载条

编辑主题配置文件，ctrl+F搜索pace，将其值改为ture就可以了，选择一款你喜欢的样式。

# Progress bar in the top during page loading.
pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-big-counter

引用本地图片

1、把博客根目录配置文件_config.yml 里的post_asset_folder:这个选项设置为true

2、安装上传本地图片的插件

npm install hexo-asset-image --save

3、安装完成后，新建文章时，会在/source/_posts文件夹内创建同名文件夹，将需要引用的图片放到这个文件夹内

4、引用图片

{% asset_img myimage.jpg 这是一个博客的图片的描述 %}

myimage.jpg为图片名称，后面是图片的描述，图片描述可以为空。

部署到GitHub超时

部署的时候推送到github时超时：

fatal: unable to access 'https://github.com/RaphetS/RaphetS.github.io.git/': Failed to connect to github.com port 443: Timed out

解决办法：电脑开启vpn，并为git设置代理

①打开代理页面

电脑打开 设置 –> 网络与Internet –> 代理

记录下当前系统代理的 IP 地址和端口号

②git设置代理

git config --global http.proxy http://127.0.0.1:7890
git config --global https.proxy http://127.0.0.1:7890

@取消git代理

部署成功后，记得去掉

git config --global --unset http.proxy
git config --global --unset https.proxy

④查看git代理

确认下git代理是否取消

git config --global --get http.proxy
git config --global --get https.proxy