Hexo+Github建站

celesteting
2,714 阅读7分钟

前言

之前一直羡慕那些拥有自己个人网站的人，一直想搭建属于自己的个人网站，也是想为自己的成长做个记录。

什么是Hexo ？

Hexo是一款基于Node.js的静态博客框架，依赖少、易于安装使用，可以方便的生成静态网页托管在GitHub上。Hexo是GitHub上的开源项目，参见：Hexo的Git。如果想了解更加全面的Hexo，可以到其官网Hexo了解。因为Hexo的创建者是台湾人，对中文的支持很友好，可以选择中文进行查看。

搭建步骤

  • GitHub创建个人仓库
  • 安装Git
  • 安装Node.js
  • 安装Hexo
  • 将 GitHub 和 Hexo 关联起来

GitHub创建个人仓库

登录到GitHub，如果没有GitHub账号，注册一个GitHub账号：GitHub,如下图所示创建个人仓库，仓库名应该为：用户名.github.io，[注：这是固定写法]，比如我的仓库名为：celesteting.github.io

image

安装Git

什么是Git？简单来说Git是开源的分布式版本控制系统，我们网站在本地搭建好了，需要使用Git同步到GitHub上。如果想了解Git的细节，参考廖雪峰老师的Git教程：Git教程。从Git官网下载Git-安装包 ，下载后安装，在命令行输入git测试是否安装成功，安装成功后，将Git与GitHub账号绑定，鼠标右键打开Git Bash Here。

image

设置user.name和user.email配置信息

$ git config --global user.name "你的GitHub用户名"
$ git config --global user.email "你的GitHub注册邮箱"

生成ssh密钥文件

$ ssh-keygen -t rsa -C "你的GitHub注册邮箱"

然后直接三个回车即可，默认不需要设置密码 然后找到生成的.ssh文件夹中的id_rsa.pub密钥，将内容全部复制，

image

打开GitHub_Settings_keys页面，新建new SSH Key，Title为标题，随意填即可，将刚刚复制的id_rsa.pub内容复制进去，最后点击Add SSH key。

image

在Git Bash检测GitHub公钥设置是否成功

$ ssh git@github.com

如下图说明成功:

image

安装Node.js

Hexo基于Node.js，Node.js下载地址：Node.js下载地址,安装后，

检测Node.js是否安装成功

$ node -v

检测npm是否安装成功

$ npm -v

安装Hexo

Hexo就是我们个人博客的框架，这里需要在自己的电脑里创建一个文件夹，这里我命名为Hexo，Hexo框架与以后你自己发布的网站都在这个文件夹中，创建好后，进入文件夹中 -> Git Bash Here -> 使用npm命令安装Hexo

$ npm install -g hexo-cli

这个安装时间较长（耐心等待中），安装完成后，初始化我们的博客，输入：

$ hexo init Hexo

为了检测网站的雏形，分别按顺序输入一下三条命令：

$ hexo new test
$ hexo g
$ hexo s

完成后在浏览器输入: http://localhost:4000/ 可以看到我们写出的第一篇博文test。

常用 Hexo 命令

  • hexo n “我的博文” #新建文章
  • hexo generate 也可简写成 hexo g #生成
  • hexo server 也可简写成 hexo s #启动服务预览（监视文件变动并自动更新，无需重启服务器）
  • hexo deploy 也可简写成 hexo d #部署
  • hexo server -s #静态模式
  • hexo server -p 5000 #修改端口
  • hexo server -i 192.168.1.1 #自定义IP
  • hexo clean #清楚缓存

将 GitHub 和 Hexo 关联起来

在Hexo根目录里_config.yml文件成为站点配置文件，打开_config.yml修改deploy:

deploy:
    type: git
    repository: https://github.com/celesteting/celesteting.github.io.git
    branch: master

保存站点配置，其实就是然hexo知道你要把Hexo部署在哪个位置，很明显，我们部署在我们GitHub仓库里，最后安装Git部署插件

$ npm install hexo-deployer-git --save

这时，我们分别输入三条命令，即可在通过xxx.github.io看到我们的博客了。

$ hexo clean
$ hexo g
$ hexo s

Hexo个性化配置

更换主题

我是真的不喜欢Hexo默认的主题，Hexo提供了很多主题,我使用的是Oishi主题，在Hexo目录（即自己创建博客的文件夹）中打开命令行，输入如下，下载Oishi主题到Hexo目录中themes下的Oishi文件夹中。

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

打开Hexo的_config.yml配置文件，将theme修改如下:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: Oishi

网站配置

网站基本配置

在Hexo的_config.yml中配置,注意timezone要在时区列表中选取，因为刚开始以为是随便写，写个了Shenzhen发现hexo g一直报错...

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Celeste's Blog   #网站标题
subtitle: Better Me     #网站副标题
description: Better Me  #网站描述（主要用于SEO）
author: Huiting Cai     #作者
language: zh-Hans       #网站使用语言（zh-Hans显示简体中文）
timezone: Asia/Shanghai #网站时区，Hexo默认使用您电脑的时区。

网站其他配置

网站刚开始创建的时候导航只有“首页”、“归档”、“标签”，而且点击“标签”会报404错误。

处理点击“标签” 404错误

因为不存在标签这个页面，所以报404错误。此时需要给创建一个tags页面。

$ hexo new page "tags"

重新发布后，发现点击“标签”显示正常

给导航增加选项，如“分类”

在 Hexo\themes\Oishi\ _config.yml 找到menu:

menu:
  home: /
  categories: /categories/
  #about: /about/
  archives: /archives/
  tags: /tags/
  #sitemap: /sitemap.xml
  #commonweal: /404/

在git shell中new一个“分类”页面，否则点击导航的“分类”会报404错误

$ hexo new page "categories"
去掉footer的由 Hexo 强力驱动，主题等信息

image

编辑 Hexo\themes\Oishi\layout\ _partials\footer.swig ，将以下代码删掉（注：因为我用的是Oishi主题，所以要删选择对应主题中的layout\ _partials\footer.swig即可）

{% if theme.copyright %}
  <div class="powered-by">
    {{ __('footer.powered', '<a class="theme-link" href="https://hexo.io">Hexo</a>') }}
  </div>

  <span class="post-meta-divider">|</span>

  <div class="theme-info">
    {{ __('footer.theme') }} &mdash;
    <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
      NexT.{{ theme.scheme }}
    </a>
  </div>
{% endif %}

集成第三方服务

资料来源于NexT

百度统计

1.登录 百度统计，定位到站点的代码获取页面；

2.复制.hm.js?后面那串统计脚本的id；

image

3.编辑 Hexo\themes\Oishi\ _config.yml ,将baidu_analytics字段的值设为你的百度统计脚本id。

阅读次数统计（LeanCloud）

注册 LeanCloud 账号并验证邮箱之后，我们就可以登录LeanCloud账号，进行一番配置之后拿到 App ID 以及 App Key 这两个参数即可正常使用文章阅读量统计功能了。

1.应用 -> 创建新应用 -> 创建 2.设置 -> 应用Key -> 复制 App ID 以及 App Key 在编辑 Hexo\themes\Oishi\ _config.yml 中相应位置输入即可。

image
正确配置之后文件如下：

leancloud_visitors:
  enable: true
  app_id: yOW0YyukmCgRVHTlVKQrwuCX
  app_key: 8Cdt8dmYHgvO6tUDiD

修改文章底部那个带#号的标签

实现效果图如图，需要修改模板 Hexo\themes\Oishi\layout\ _macro\post.swig ，搜索 rel="tag"># ，将 # 换成

image

给文章添加边框效果

打开 Hexo\themes\Oishi\source\css\ _custom\custom.styl，向里面加入：

 .post {
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }

在网站底部加上本站访客数

打开 Hexo\themes\Oishi\layout\ _partials\footer.swig 文件，在copyright前加上下面这句代码

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

再在合适位置添加以下显示统计的代码

<div class="theme-info">
  <i class="fa fa-user-md"></i>
    <span id="busuanzi_container_site_uv">
      本站访客数:<span id="busuanzi_value_site_uv"></span>次
  </span>
</div>

在页面底部显示下图

image

在这里有两种不同计算方式的统计代码： 1.pv的方式，单个用户连续点击n篇文章，记录n次访问量

<span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>

2.uv的方式，单个用户连续点击n篇文章，只记录1次访客数

<span id="busuanzi_container_site_uv">
  本站总访问量<span id="busuanzi_value_site_uv"></span>次
</span>

修改页面中文显示

打开 Hexo\themes\Oishi\languages\zh-Hans.yml

实现文章的统计功能

安装 hexo-wordcount ：

$ npm install hexo-wordcount --save

然后在主题配置文件(themes\Oishi\ _config.yml)中，配置如下：

post_wordcount:
  item_text: true
  wordcount: true
  min2read: true

要将数字统计以及阅读时长换行显示，打开 Hexo\themes\Oishi\source\css\ _custom\custom.styl 添加

.post-wordcount{ display: block; }

效果图如下：

image

添加顶部加载条

打开 \Hexo\themes\Oishi\layout\ _partials\head.swig 文件，添加以下代码

<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">

但是，默认是粉色的，改变颜色在该文件中添加以下代码

<style>
    .pace .pace-progress {
        background: #1E92FB; /*进度条颜色*/
        height: 3px;
    }
    .pace .pace-progress-inner {
         box-shadow: 0 0 10px #1E92FB, 0 0 5px     #1E92FB; /*阴影颜色*/
    }
    .pace .pace-activity {
        border-top-color: #1E92FB;    /*上边框颜色*/
        border-left-color: #1E92FB;    /*左边框颜色*/
    }
</style>

修改字体大小

打开 Hexo\themes\Oishi\source\css\ _variables\base.styl 文件，将 $font-size-base改成16px

修改页面样式

打开 Hexo\themes\Oishi\source\css\ _custom\custom.styl 编辑相应样式即可

修改页面的html结构

我希望给字体统计和阅读时长加上单位，编辑 Hexo\themes\Oishi\layout\ _macro\post.swig

{% if theme.post_wordcount.wordcount or theme.post_wordcount.min2read %}
            <div class="post-wordcount">
              {% if theme.post_wordcount.wordcount %}
                {% if not theme.post_wordcount.separated_meta %}
                  <span class="post-meta-divider">|</span>
                {% endif %}
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                {% if theme.post_wordcount.item_text %}
                  <span class="post-meta-item-text">{{ __('post.wordcount') }}</span>
                {% endif %}
                <span title="{{ __('post.wordcount') }}">
                  {{ wordcount(post.content) }} 字
                </span>
              {% endif %}

              {% if theme.post_wordcount.wordcount and theme.post_wordcount.min2read %}
                <span class="post-meta-divider">|</span>
              {% endif %}

              {% if theme.post_wordcount.min2read %}
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                {% if theme.post_wordcount.item_text %}
                  <span class="post-meta-item-text">{{ __('post.min2read') }}</span>
                {% endif %}
                <span title="{{ __('post.min2read') }}">
                  {{ min2read(post.content) }} min
                </span>
              {% endif %}
            </div>
          {% endif %}

设置头像

  1. 添加头像图片 打开 Hexo\config.yml ，为其添加以下代码
avatar: http://ounwd2b8q.bkt.clouddn.com/timg.jpg
  1. 编辑头像样式，给头像加入hover的动画 打开 Hexo\themes\Oishi\source\css_common\components\sidebar\sidebar-author.styl 文件，添加以下代码
.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;

  border-radius: 80px; 
  box-shadow: inset 0 -1px 0 #333sf;

  transition: transform 1s ease-out;
}

img:hover{
  animation-play-state: paused;
  transform: rotateZ(360deg);
}

设置网站图标

在EasyIcon中找一张（32x32）的 ico 图标，并将图标名称改为 favicon.ico ，然后把图标放在七牛里，并在 Hexo\themes\Oishi\ _config.yml 添加以下代码

favicon: http://ounwd2b8q.bkt.clouddn.com/favicon.ico

绑定域名

  1. 购买域名，我是在Godaddy购买了域名；
  2. 在网站目录 \Hexo\source 新建一个CNAME的文件（不要后缀）编辑里面的内容为域名：
celesteting.com

再在git Bash运行 hexo g -d

  1. 添加DNS Service记录 流传Godaddy的域名解析服务器被墙掉，导致域名无法访问，不得已需要把域名解析服务迁移到国内比较稳定的服务商，这里选的是DNSPod。在DNSPod注册账号，然后添加域名设置两个A记录，分别是@和www,ip地址为git page的地址（可以通过命令行 ping celesteting.github.io得到ip地址）

image

4.设置相应的域名DNS Service

在Godaddy管理DNS里面自定义域名服务器中添加以下两条在DNSPod得到的记录

image
5. 稍等解析生效后就可以通过在浏览器中输入自己的域名方粉GitHub Pages博客啦！celesteting.com

博文操作

新建博文

在git shell输入：

$ hexo new [layout] "博文名字"

即可在 Hexo\source\ _posts 目录中找到 “博文名字.md” 这个文件。博文名字如果包含空格，必须用 "" 将其包围，也可为中文。

你就可以使用markdown编辑器打开博文内容进行编辑了。我是直接用有道云笔记中的Markdown进行博文编辑的。（其中layout是可选参数，默认为post，layout可在Hexo\scaffolds目录下查看。你也可以添加自己的layout[布局],添加一个文件即可，同时也可以编辑现有的layout，比如post的layout默认是Hexo\scaffolds\post.md）

---
title: {{ title }}
date: {{ date }}
tags:
---

我想添加categories，以免每次手工输入，只需要修改这个文件添加一行即可。

---
title: {{ title }}
date: {{ date }}
categories: 
tags:
---

注意，所有文件的 : 后面必须有个空格，不然会报错

编辑博文

编辑博文主要信息

刚刚生成的博文文件

---
title: Hexo+Github建站       #文章页面上显示的名称，可随意修改，不会出现在URL中
date: 2017/8/14              #文章生成时间，一般不改，当然也可以任意修改
categories: Hexo建站         #文章分类目录，可以为空
tags: [Hexo]                 #文章标签，可空，多标签请用[tag1,tag2,tag3]
---

文章摘要

不想文章在主页全部显示，可以在需要截取的位置加上一下代码

<!--more-->

给博客插入图片

本地路径

使用本地路径：在Hexo/source目录下新建一个img文件夹，将图片放入该文件夹中，插入图片路径即可；

使用七牛云引用外部链接

七牛云存储:需要注册，速度快。按下图操作上传文件，然后复制外链即可。

image

参考文章

  1. shenzekun.cn/hexonext的主题…
  2. GitHub+Hexo 搭建个人网站详细教程
  3. cherryblog.site/
  4. nextT
  5. 绑定域名
avatar
文章
阅读
粉丝

友情链接：