Github+Hexo光速搭建个人网站

Posted on | Post modified: | In | | Visitors:
Words count in article: 4.4k | Reading time ≈ 17

参考文章

Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Heroku上，是搭建博客的首选框架。

Hexo同时也是GitHub上的开源项目，参见：hexojs/hexo 如果想要更加全面的了解Hexo，可以到其官网 Hexo 了解更多的细节

本教程是在win10 环境下完成的，其余环境也类似

个人博客：BLOG

基础环境

获取域名（可有可无）

域名相对更容易记忆，也可以让人更快的访问自己的网站，但是其实搭建在github上，网址同样非常的简单（https://yourname.github.io/）。因此域名不是很必要。

申请域名推荐阿里云、腾讯云和华为云，具体使用哪一个看哪个便宜咯

Github创建个人仓库

  1. 登录Github账号，没有就使用个人邮箱注册一个就行。登录账号之后新建 New repository

    image-20200509130823905

  2. 仓库名一定要是用户名.github.io，固定写法不能修改。

    Description 可写可不写

    image-20200509131046154

安装Git

Git是一个开源的分布式版本控制系统。什么意思？简单来说就是在你写论文或者写代码的时候，一般来说会备份几个版本，第一版、第二版等等。然后你文件夹里就会有很多版本，有人说我不需要几个版本一个就行了，但是万一你某些地方修改错了，改起来非常的麻烦，这个时候如果可以直接还原到上一个版本不就太快落了吗。Git就是帮助我们自动做这些事情的一个tool，可以帮你保存每个版本，让你时刻可以还原到想要还原的地方。

想要完整的了解具体细节可以参考我写的一个教程：Git

接下来进入主题：安装Git，win可以直接从官网下载安装包，安装过程一路点点点就行了。安装完成后，你的右键点击一般出现 Git GUI Here 和 Git Bash here。可以在命令行（cmd/powershell）输入 git --version，安装成功会出现 版本号。安装失败请自行百度失败原因

image-20200509132340139

安装成功后还需要简单的配置以下Git，在应用程序中找到并打开 Git bash

设置 user.name 和 user.email

1
2
git config --global user.name "your.name"
git config --global user.email "your.email"

其中 –global 意味着全局使用一个name和email，name和email自行取就行了，在跟Github通信时，代表通信电脑的一个名字。

SSH 配置

设置完成后，需要设置 ssh ，ssh是一个加密的通信协议，让你的电脑和GitHub可以安全高效的传输信息。

  1. 生成ssh密钥，若有则无需生成，查看有无在cmd输入 ~/.ssh

    如果有就会返回 is a directory，没有就会返回 No such file…

    没有就创建SSH key，在 git bash 输入

    1
    ssh-kengen -t rsa -C "your email"

    会提示你输入文件名，一般不需要输入，直接回车，就会生成id_rsa和id_rsa.pub两个文件。其中id_rsa是私钥 id_rsa.pub是公钥，私钥一般不能随意泄露，而公钥可以随意告诉任何人

    之后会提示你输入密码，建议无须设置，直接回车。

  2. 添加SSH key到Github

    打开GitHub网页在个人settings中找到SSH and GPG keys，点击New SSH key

    Title随意取，文本框中复制id_rsa.pub中的内容

  3. 测试，在bash中输入 ssh -T git@github.com，第一次会提示你是否建立选择yes，成功之后会输出以下提示。

安装Node.js

Hexo基于Node.js，Node.js下载地址：Download | Node.js 下载安装包，注意安装Node.js会包含环境变量及npm的安装，安装后，检测Node.js是否安装成功，在命令行中输入 node -v 检测npm是否安装成功，在命令行中输入npm -v :

image-20200509133649795

到此Hexo的基础环境已经搭建完毕，下面开始正式安装Hexo

安装Hexo

Hexo就是我们的个人博客网站的框架，我个人是将Hexo框架与blog文件是分开。我将Hexo框架搭建在放软件的盘里面，直接在根目录创建了一个文件夹取名hexo。然后进入文件夹，按住shift键，右击鼠标点击命令行。当然直接打开命令行然后cd到具体路径也可以的。

image-20200509134108899

使用 npm命令安装hexo

1
npm install -g hexo-cli

这个安装时间较长耐心等待，安装完成后，目录下会生成 node_modules 文件夹，打开文件夹会会有一个 .bin 文件夹，将 .bin文件夹的路径(XXX\node_modules.bin)添加到系统环境变量中去。

如何添加系统环境变量？ 在桌面右键点击我的电脑，点属性，之后再点高级系统设置，再点环境变量。可以将路径添加到个人用户中，也可以添加到系统中去，二选一即可。然后双击 Path 新建一个路径，将.bin路径复制进去就行了。

image-20200509134730593

至此hexo框架安装完毕，接下来选择其他的一个合适的路径，用于放置网站的数据。

进入路径，右键打开 git bash，输入，hexo init blog，blog是文件夹的名字，也可以自己设置，初始化完成后，cd blog

1
2
hexo init blog
cd blog

至此网站雏形已经完成，可以使用下面三条命令观看：

1
2
3
hexo new test
hexo g
hexo s

这些命令在后面作介绍，完成后，打开浏览器输入地址：

1
localhost:4000

便可看到网站的雏形了，如果连接出现问题，可以自行百度。

下面介绍Hexo常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
npm install hexo -g  # 安装hexo
npm update hexo -g   # 升级
hexo init #初始化博客，如果不指定博客名字，那么需要在一个空文件夹下初始化

hexo new "article" / hexo n "article"
# 新建的文章都是md文件格式，被系统统一放置在 source/_posts/路径下
hexo generate / hexo g
# 生成网站
hexo server / hexo s
# 启动服务预览
hexo deploy / hexo d
# 部署网站到github

hexo server #Hexo会监视文件变动并自动更新，无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP

hexo clean #清除缓存，若是网页正常情况下可以忽略这条命令
推送网站

上面只是在本地预览，接下来要做的就是就是推送网站，也就是发布网站，让我们的网站可以被更多的人访问。在设置之前，需要解释一个概念，在blog根目录里的_config.yml文件称为站点配置文件，如下图

image-20200509180837682

进入根目录里面的 themes 文件夹下，里面有一个初始主题landscape文件夹，点进去，里面也有个_config.yml文件，这个是主题配置文件

  1. 下一步将我们的Hexo与GitHub关联起来，打开站点的配置文件_config.yml，翻到最后修改为：

    注意repo需要修改为自己的地址，type/repo/branch后面的冒号要接一个空格键，不能少！不然会出错

    1
    2
    3
    4
    deploy:
      type: git
      repo: https://github.com/guuhuaa/guuhuaa.github.io
      branch: master

  2. 其实就是给hexo d 这个命令做相应的配置，让hexo知道你要把blog部署在哪个位置，很显然，我们部署在我们GitHub的仓库里。最后安装Git部署插件，输入命令：

    1
    npm install hexo-deployer-git --save

  3. 这时，我们分别输入三条命令：

    1
    2
    3
    hexo clean 
    hexo g 
    hexo d

    其实第三条的 hexo d 就是部署网站命令，d是deploy的缩写。完成后，打开浏览器，在地址栏输入你的放置个人网站的仓库路径，即 [https://xxxx.github.io]

绑定域名

  1. 登录到你购买域名的某某云，找到已购买域名，添加解析

    image-20200509181953947

  2. 添加解析，一般添加两个记录类型，添加后可以通过 www.xxx.xxx或者xxx.xxx访问你的网站，记录值都是 xxx.github.io

    image-20200509182247388

  3. 解析设置完成之后，还需要登录到GitHub，进入网站的仓库，点击setting，往下翻一翻就能看到custom domain，输入你的域名，记得保存

  4. 第三步，进入本地博客文件夹，进入blog/source目录下，手动创建一个记事本文件，输入你的域名，只需要域名即可，可以不加www，建议不加。如果带有www，那么以后访问的时候必须带有www完整的域名才可以访问。

    注意：保存命名为CNAME，保存为所有文件而不是txt文件

    image-20200509183239428

  5. 完成之后，进入blog目录打开git bash，依次输入：

    1
    2
    3
    hexo clean
    hexo g
    hexo d

    这时候打开浏览器在地址栏输入你的个性化域名将会直接进入你自己搭建的网站

美化网站

更换主题

如果不喜欢自带的主题，可以更换不同的主题：hexo主题到官网去下载一个喜欢的。然后放入 themes 文件夹内，修改站点配置文件：

1
theme: XXX(your theme)

不过大多数人包括我自己都是使用的Next主题。下面就以next主题说明以下如何配置主题。

安装 NexT

Hexo 安装主题的方式非常简单，只需要将主题文件拷贝至站点目录的 themes 目录下， 然后修改下配置文件即可。具体到 NexT 来说，安装步骤如下。

下载主题

如果你熟悉 Git，建议你使用 克隆最新版本 的方式，之后的更新可以通过 git pull 来快速更新， 而不用再次下载压缩包替换，使用git pull可以快速的更新主题文件。想了解git可以看看我的blog: git

有两种方式可以下载主题：

  1. 克隆，在终端窗口下，定位到 Hexo 站点目录下

    1
    2
    $ cd your-hexo-site
    $ git clone https://github.com/iissnan/hexo-theme-next themes/next

  2. 手动下载，前往 NexT 版本 发布页面。选择你所需要的版本，下载 Download 区域下的 Source Code (zip) 到本地。解压所下载的压缩包至站点的 themes 目录下， 并将 解压后的文件夹名称（hexo-theme-next-0.4.0）更改为 next。

启用主题

与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后，打开 站点配置文件， 找到 theme 字段，并将其值更改为 next。

1
theme: next
验证主题

首先启动 Hexo 本地站点，并开启调试模式（即加上 --debug），整个命令是 hexo s --debug。 在服务启动的过程，注意观察命令行输出是否有任何异常信息，如果你碰到问题，这些信息将帮助他人更好的定位错误。 当命令行输出中提示出：

1
INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

此时即可使用浏览器访问 http://localhost:4000，检查站点是否正确运行。

当你看到站点的外观与下图所示类似时即说明你已成功安装 NexT 主题。这是 NexT 默认的 Scheme —— Muse

pic

现在，你已经成功安装并启用了 NexT 主题。下一步我们将要更改一些主题的设定，包括个性化以及集成第三方服务。

主题设定
选择 Scheme

Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 为你提供多种不同的外观。同时，几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持三种 Scheme，他们是：

  • Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
  • Mist - Muse 的紧凑版本，整洁有序的单栏外观
  • Pisces - 双栏 Scheme，小家碧玉似的清新

Scheme 的切换通过更改 主题配置文件，搜索 scheme 关键字。 你会看到有三行 scheme 的配置，将你需用启用的 scheme 前面注释 # 去除即可。

1
2
3
#scheme: Muse
#scheme: Mist
scheme: Pisces
设置语言

编辑 站点配置文件， 将 language 设置成你所需要的语言。建议明确设置你所需要的语言，例如选用简体中文，配置如下：

1
language: zh-Hans

目前 NexT 支持的语言如以下表格所示：

语言 代码 设定示例
English en language: en
简体中文 zh-Hans language: zh-Hans
Français fr-FR language: fr-FR
Português pt language: pt or language: pt-BR
繁體中文 zh-hk 或者 zh-tw language: zh-hk
Русский язык ru language: ru
Deutsch de language: de
日本語 ja language: ja
Indonesian id language: id
Korean ko language: ko
设置 菜单

菜单配置包括三个部分，第一是菜单项（名称和链接），第二是菜单项的显示文本，第三是菜单项对应的图标。 NexT 使用的是 Font Awesome 提供的图标， Font Awesome 提供了 600+ 的图标，可以满足绝大的多数的场景，同时无须担心在 Retina 屏幕下 图标模糊的问题。

编辑 主题配置文件，修改以下内容：

  1. 设定菜单内容，对应的字段是 menu。

    菜单内容的设置格式是：Key: /link/|| icon
    其中 key 是一个名称，这个名称并不直接显示在页面上
    /link/ 是这个菜单对应的链接，icon是对应要使用什么图标

    注意，next下载之后，/ 和||之间有一个空格，需要手动删除，不然网站的菜单栏点开会报错

    link其实对应的是source文件夹下的路径

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

    注1：若你的站点运行在子目录中，请将链接前缀的 / 去掉

    注2：要使用新的菜单栏，需要手动去创建new page

    举例：如果要设置tags菜单，就需要创建一个 hexo new page “tags”，使用这个命令之后，source文件夹会出现一个tags文件夹，tags文件夹内会自动生成一个index.md，需要手动修改一下，如下。

    设置 categories和archives也是如此

    1
    2
    3
    4
    title: tags
    date: 2020-05-08 22:36:50
    type: tags
    comments: false

  2. 设置菜单项的显示文本。在第一步中设置的菜单的名称并不直接用于界面上的展示。Hexo 在生成的时候将使用 这个名称查找对应的语言翻译，并提取显示文本。这些翻译文本放置在 NexT 主题目录下的 languages/{language}.yml （{language} 为你所使用的语言）。以简体中文为例，若你需要添加一个菜单项，比如 something。那么就需要修改简体中文对应的翻译文件 languages/zh-Hans.yml，在 menu 字段下添加一项：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    menu:
      home: 首页
      archives: 归档
      categories: 分类
      tags: 标签
      about: 关于
      search: 搜索
      commonweal: 公益404
      something: 有料
设置侧栏

默认情况下，侧栏仅在文章页面（拥有目录列表）时才显示，并放置于右侧位置。 可以通过修改 主题配置文件 中的 sidebar 字段来控制侧栏的行为。侧栏的设置包括两个部分，其一是侧栏的位置， 其二是侧栏显示的时机。

设置侧栏的位置，修改 sidebar.position 的值，支持的选项有：

  • left - 靠左放置
  • right - 靠右放置

目前仅 Pisces Scheme 支持 position 配置

已知侧栏在 use motion: false 的情况下不会展示。

设置头像

编辑 主题配置文件， 修改字段 avatar， 值设置成头像的链接地址。其中，头像的链接地址可以是：

  1. 完整的互联网 URI

    1
    http://example.com/avatar.png

  2. 站点内的地址

    将头像放置主题目录下的 source/uploads/ （新建 uploads ，目录若不存在） 配置为：avatar: /uploads/avatar.png或者 放置在 source/images/ 目录下 配置为：avatar: /images/avatar.png

头像设置示例

1
avatar: http://example.com/avatar.png
阅读次数统计（leancloud）

请查看 为NexT主题添加文章阅读量统计功能

Next 第三方服务集成设置

next官网有很好的描述：第三方服务集成

腾讯公益404页面

腾讯公益404页面，寻找丢失儿童，让大家一起关注此项公益事业！效果如下 http://www.ixirong.com/404.html

使用方法，新建 404.html 页面，放到主题的 source/404/ 目录下，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
  <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
  <script type="text/plain" src="http://www.qq.com/404/search_children.js"
          charset="utf-8" homePageUrl="/"
          homePageName="回到我的主页">
  </script>
  <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
  <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

然后修改 主题配置文件，将menu后面的commonweal取消注释并修改：

1
commonweal: /404/404.html|| heartbeat