使用github托管hexo博客

博客

整了一个博客记录一下过程，都是跟着网上的文章整的非原创。

下载安装基础运行程序

Git

https://github.com/git-for-windows/git/releases/download/v2.49.0.windows.1/Git-2.49.0-64-bit.exe

Node.js

下载地址：https://nodejs.org/en/

1
2
npm config set prefix "C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_cache"

看不懂的话就去单独搜如何安装Node.js

安装 hexo 程序

安装 hexo 程序

运行命令：

1
npm install -g hexo

查看版本：

1
hexo v

如显示多行版本信息如 hexo: 5.1.1等，安装成功。

创建 hexo 文件夹

hexo 文件夹，是未来博客运转的目标文件夹，写文、主题安装等等都在这里完成。

请在指定路径新建文件夹（英文名），右键空白处，选择 Git Bash here，输入指令：

1
hexo init

安装主题

现在这个是必须过程了，反正自带的主题也没人用不是么？

6.1 在 theme 文件夹下，建立你要使用的主题的同名文件夹，比如 theme/next

6.2 cd 到 theme 文件夹，或者直接在 theme 文件夹里右键运行 Git Bash。

6.3 输入获取主题的命令：

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

速度不会太快，等待安装进度结束。

修改配置信息：

打开安装文件夹下_config.yml 文件，修改 theme 后面的名字为你刚才安装的主题，比如 next。

部署 hexo

1
hexo g

启动 hexo 本地化预览

1
hexo s

访问本地网站地址：

http://localhost:4000

本地连接 GitHub

配置用户名与邮箱

在某一个盘里面创建一个文件夹，名字随意，然后右键选择 Open Git Bash Here：

不出意外的话应该会弹出一个命令行界面

我们在里面输入

1
2
git config --global user.name "你的 GitHub 用户名"
git config --global user.email "你的 GitHub 邮箱"

创建 SSH 密匙

我们在命令行窗口中输入

1
ssh-keygen -t rsa -C "你的 GitHub 邮箱"

什么都不用管，一路回车就行。

然后我们进入 C:\Users\ 用户名 \.ssh 目录（勾选显示 “隐藏的项目”）

我们用记事本打开id_rsa.pub并复制里面的内容。

在 GitHub 中添加 SSH 密钥

这个时候我们回到 GitHub，进入 Settings：

选择左边栏的 SSH and GPG keys，点击 New SSH key：

Title 随便取，然后把 id_rsa.pub 里面的内容到复制到 Key 中，点击 Add SSH key：

保存完毕以后，我们可以在本地验证一下连接。

验证连接

依旧在 Git Bash Here 界面中输入

1
ssh -T git@github.com

出现 “Are you sure……”，输入 yes 回车确认。

若出现下图的提示即连接成功：

创建 GitHub 仓库

我们在自己 GitHub 的主页 repository 中点击右上角的 New：

填写基本信息

  • Repository name 中输入用户名.github.io，一定要是这个名字！
  • 勾选 Add a README file

填好后点击 Create repository 创建仓库。

现在我们访问 https://用户名.github.io（夜梦的就是 yemenghexo.github.io）可以看到默认界面：

上传 hexo 程序到 GitHub

安装hexo-deployer-git

我们需要先安装 hexo-deployer-git：

1
npm install hexo-deployer-git --save

修改_config.yml 文件

然后修改_config.yml 文件末尾的 Deployment 部分：

修改成如下（修改为你的用户名与仓库名）

1
2
3
4
deploy:
  type: git
  repo: git@github.com:suhaynn/suhaynn.github.io.git
  branch: gh-pages

其实就是通过 SSH 进行连接，SSH 连接地址可以 直接在仓库 Code 里面看到：

修改完成保存后运行

1
2
hexo c
hexo d

出现下面的提示说明已经把网站上传到 GitHub 了：

然后我们需要在库设置（Repository Settings）中将默认分支设置为_config.yml 配置中的分支名称。

在 pages 页面调整源分支：

不出意外的话是不会出意外的，稍等片刻我们访问用户名.github.io

1
hexo clean & hexo g & hexo d

安装cactus主题

进入hexo所在的文件夹（我是cd E:\blog\suhaynn）

执行

1
git clone https://github.com/probberechts/hexo-theme-cactus.git themes/cactus

如果timeout就用ssh连接

1
git cline git@github.com:probberechts/hexo-theme-cactus.git themes/cactus

然后在./_config.yml中修改theme

1
2
# theme: landscape
theme: cactus

切换主题的风格

前面提到了cactus主题有四个风格，切换风格只需要进入./themes/cactus/_config.yml中找到colorscheme修改就完事，注意每次修改完都需要hexo clean hexo g才会生效

1
2
3
4
# Set the color scheme.
# Available color schemes are 'dark', 'light', 'classic' and 'white'.
# Alternatively, add your own custom color scheme to source/css/_colors.
colorscheme: dark

导航栏相关

新建一个导航栏的项

在./themes/cactus/_config.yml找到nav

1
2
3
4
5
6
nav:
  home: /
  about: /about/
  articles: /archives/
  projects: http://github.com/probberechts
  LINK_NAME: URL

直接在nav下面添加就行，添加完这一项之后可以让它指向一个链接（例如projcets），也可以让它指向站内的一个页面。新建一个页面执行hexo new page xxx，然后这个页面的路径就是/xxx/

更新后会在./themes/cactus/source中发现一个和page名称一样的文件夹

让导航栏中的某一项显示内容在首页

以project为例，只需在./themes/cactus/source中创建/_data/projects.json，然后修改json文件为

1
2
3
4
5
6
7
8
9
10
11
12
[
    {
       "name":"Hexo",
       "url":"https://hexo.io/",
       "desc":"A fast, simple & powerful blog framework"
    },
    {
       "name":"Font Awesome",
       "url":"http://fontawesome.io/",
       "desc":"The iconic font and CSS toolkit"
    }
]

在导航栏添加搜索功能

在./themes/cactus/_config.yml中找到nav 新建search标签

1
2
nav:
  search: /search/

执行

1
npm install hexo-generator-search --save

执行

1
hexo new page search

进入./themes/cactus/source/serch/index.md，修改md文件的头为

1
2
3
title: Search
type: search
---

更新之后进入网站，点击search就可以搜索了

新增标签功能

只需要在每篇文章的头部添加

1
2
3
4
5
6
7
8
title: Tags and Categories
date: 2017-12-24 23:29:53
tags:
- Foo
- Bar



就可以在首页看到

每篇文章可以有两个tag，tag的顺序影响其重要程度

开启评论功能

cactus支持Disqus和Utterances两个平台的评论功能，只需要在./themes/cactus/_config.yml分别找到它们就行。

以Disqus为例，把enable设置为true，然后再去Disqus官网注册个账号,认证邮箱后在shortname处填上自己的昵称就行

1
2
3
disqus:
  enabled: true
  shortname: SITENAME

之后就能愉快的评论了，不过Disqus现在好像必须要梯子才能正常使用。

添加其他社交平台链接

在./themes/cactus/_config.yml搜索Social media links

1
2
3
4
social_links:
  github: your-github-url
  twitter: your-twitter-url
  NAME: your-NAME-url

然后前面就是社交平台的名称，后面就是你该社交平台的url，注意这里只能选Font awesome上有的icon，才会显示对应的icon，进入网站搜索社交平台的英文名就能看到是否有这个icon了，这里列出几个比较常见的：weibo weixin zhihu rss。

增加数据分析

在./themes/cactus/_config.yml中，搜索analytics，cactus支持以下几种数据分析功能，说白了就是后台管理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
google_analytics:
  enabled: true
  id: 'UA-49627206-1'

baidu_analytics:
  enabled: true
  id: 2e6da3c375c8a87f5b664cea6d4cb29c

cloudflare_analytics:
  enabled: true
  id: 0dabb6e21848405483a237e6a7b6ed04

umami_analytics:
  enabled: false
  id: e77e68be-f6e4-4br3-9365-2b76b57cd571
  host: https://analytics.domain.com

以百度分析为统计，先去百度统计官网注册一个账号，然后在网站列表点击新增网站

填写相关信息

然后在代码管理->代码获取页面复制这一段，这就是你的tracking_id

然后回到./themes/cactus/_config.yml，修改这里的id，enabled设置为true

1
2
3
baidu_analytics:
  enabled: true
  id: 2e6da3c375c8a87f5b664cea6d4cb29c

进入百度统计的代码管理->代码安装检查，点击开始检查，如果显示代码安装正确，过一会就能显示你网站统计的数据了。

自定义字体/颜色和网站logo/icon

自定义颜色

进入./themes/cactus/source/css/colors中有四个文件，对应不同风格的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$color-background = #1d1f21
$color-footer-mobile-1 = lighten($color-background, 2%)
$color-footer-mobile-2 = lighten($color-background, 10%)
$color-background-code = lighten($color-background, 2%)
$color-border = #908d8d
$color-meta = #908d8d
$color-meta-code = #908d8d
$color-link = rgba(212, 128, 170, 1)
$color-text = #c9cacc      //正文
$color-accent-3 = #cccccc  //副副标题
$color-accent-2 = #eeeeee  //副标题
$color-accent-1 = #ff6a00  //主标题
$color-quote = #ccffb6
$highlight = hexo-config("highlight") || "rainbow"

别的参数我没有调过，大家可以自己修改试一试

自定义字体

进入./themes/cactus/source/css/_variables.styl，就可以修改字体了

1
2
3
4
5
6
7
8
9
10
11
12
// Fonts
$font-family-body = "Menlo", "Meslo LG", monospace
$font-family-mono = "Menlo", "Meslo LG", monospace
$font-size = 14px
$line-height = 1.725
$page-width = 0rem + (hexo-config("page_width") || 39)
// Logo
$logo-width = 0px + (hexo-config("logo.width") || 0)
$logo-height = 0px + (hexo-config("logo.height") || 0)
$logo-grayout = hexo-config("logo.grayout") || false
// Colors
$colors = hexo-config("colorscheme") || "dark"

可用的字体在./themes/cactus/source/lib/中，cactus自带的只有meslo-LG vazir-font两种，有需要可以自己下载。

自定义网站logo/icon

在./themes/cactus/source/images/下有四张图片

apple-touch-icon是苹果产品将网站的快捷方式添加到主屏幕所显示的logo

logo就是显示在你网页上的那个东西，设计logo的网站，里面有很多半成品，拿来就能用。

favicon-192x192就是192x192像素的logo.png，网上随便找个软件就能压缩

favicon.ico有点难搞，因为它一个文件里面有不同规格的ico，我是用了一个叫氢贝的软件弄的，里面可以直接将各种图片格式转化为多规格的ico，非常方便。

添加点击量功能

进入./themes/cactus/_config.yml添加下面一段代码

1
2
3
# 是否开启访问量统计功能(不蒜子)
busuanzi:
 enable: true

进入./themes/cactus/layout/_partial/footer.ejs将其全部修改覆盖为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<footer id="footer">
      <div class="footer-left">
        <%= __('footer.copyright') %> &copy;
        <% var endYear = (theme.copyright && theme.copyright.end_year) ? theme.copyright.end_year : new Date().getFullYear() %>
        <% var startYear = (theme.copyright && theme.copyright.start_year) ? theme.copyright.start_year : new Date().getFullYear() %>
        <%= startYear >= endYear ? endYear : startYear + "-" + endYear %>
        <%= config.author || config.title %>
      </div>
      <div class="footer-right">
        <nav>
          <ul>
            <% for (var i in theme.nav) { %><!--
          --><li><a href="<%- url_for(theme.nav[i]) %>"><%= __('nav.'+i).replace("nav.", "") %></a></li><!--
        --><% } %>
          </ul>
          <ul>
            <% if (theme.busuanzi && theme.busuanzi.enable){ %>
              <!-- 不蒜子统计 -->
              <span id="busuanzi_container_site_pv">
                  本站总访问量<span id="busuanzi_value_site_pv"></span>次
              </span>
              <span class="post-meta-divider">|</span>
              <span id="busuanzi_container_site_uv" style='display:none'>
                      本站访客数<span id="busuanzi_value_site_uv"></span>人
              </span>
            <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
            <% } %>
          </ul>
        </nav>
      </div>
      
</footer>