1 基本描述

项目存储：使用Github来存放个人博客项目,并使用Github的pages服务使个人博客能够被浏览器访问(http请求)。

项目创建：使用node.js的npm下载安装Hexo,使用Hexo生成博客项目

项目管理：使用git管理项目版本和推送项目到Github

博客评论：使用gittalk实现博客留言

访问统计：使用腾讯分析提供的接口统计博客的访问量和访客数

2 所需资源

• Github:面向开源及私有软件项目的托管平台，供存放博客项目。需注册自己的账号
• git一个开源的分布式版本控制系统,用于管理项目版本和将本地代码推送至Github平台，需下载安装
• Node.js:一个让 JavaScript 运行在服务端的开发平台,需要下载并安装在本机
• NPM:(node.js package manager)是随同NodeJS一起安装的包管理工具，可用于下载第三方包，能解决NodeJS代码部署上的很多问题，无需单独下载安装
• Hexo:一款使用node.js开发的简单、极速、强大的博客框架，用于快速生成的博客
• Gittalk一个基于 GitHub Issue 和 Preact 开发的评论插件,需在支持Gittalk的主题中配置相关信息，也可在不支持的主题中增加Gittalk插件
• 腾讯分析用于统计访问量和访客数，需注册并添加自己博客的站点

3 资源准备

3.1 下载安装git

点击这里下载对应版本git并安装

安装git后生成自己的ssh密钥对，用于github的认证。在终端(Mac os/Linux)或者cmd(Windows)执行以下命令生成ssh密钥

ssh-keygen -t rsa -C "youremail@example.com"
# -t:指定密钥类型，默认rsa
# -C:指定注释，用于标示密钥，内容任意

3.2 下载安装node.js

点击这里下载对应版本node.js

3.3 下载安装Hexo

安装node.js后在终端(Mac os/Linux)或者cmd(Windows)执行以下命令安装Hexo

npm install hexo-cli -g

4 博客搭建

4.1 注册Github平台账号并创建博客项目仓库

4.1.1 注册Github

点击这里到注册页面进行注册

注册完成后，将个人本地的ssh公钥添加到自己Github账号中。打开.ssh->id_rsa.pub(.shh文件夹在不同系统存放路径不一致)

在个人Github账号Settings->SSH and GPG keys下新建SSH key，复制id_rsa.pub文件中内容粘贴到key中

4.1.2 创建博客项目仓库

登录到Github，并创建个人博客仓库(标记为：远程仓库)

新建仓库，填写仓库名和描述。仓库名须为github_name.github.io的形式，其中github_name为个人github账户名

仓库创建完成后，需要将github上的仓库克隆到本地，复制你的仓库ssh地址

在终端或cmd下进入想克隆的路径下使用以下命令克隆,请记住这个文件夹(标记为：本地仓库)的位置

git clone git@github.com:github_name/guthub_name.github.io.git

4.2 生成本地博客项目并推送至远程仓库

使用Hexo生成博客项目，最后将博客项目文件夹内的所有文件&文件夹拷贝至本地仓库

4.2.1 生成博客项目

在终端或cmd下进入想存放的路径，执行以下命令即可完成博客项目(博客网站)的生成

hexo init <folder>
cd <folder>
npm install

4.2.2 本地预览博客

在将博客项目内的所有文件&文件夹拷贝至本地仓库后，在终端或cmd下进入本地仓库根目录下执行以下命令启动博客的http服务。然后在浏览器中访问localhost:4000

hexo server

4.2.3 推送博客项目至远程仓库

打开本地仓库根目录下的_config.yml文件，在文件的最后配置部署信息

完成部署配置后，在终端或cmd下进入本地仓库根目录下执行以下命令将本地仓库推送到远程仓库。然后访问http://github_name.github.io 即可访问远程仓库上的博客

hexo clean # 清除缓存
hexo generate # 生成静态文件
hexo deploy # 部署到远程仓库

5 评论插件

使用Gittalk插件将评论存放在指定的仓库下,获取用于认证存放评论的Client ID 和 Client Secret

5.1 注册Github APP

在个人Github->Settings->Developer Settings下新建一个OAuth App并获取Client ID和Client Secret。此处红框中需要填写你的博客地址https://github_name.github.io

下面是Client ID和Client Secret

5.2 配置Gittalk插件

打开本地仓库根目录->themes->(theme_folder)->_config.yml配置Gittalk，其中Client ID 和 Client Secret是前面得到的，repo是存放评论的仓库名，owner是仓库的所有者，admin是仓库的管理者

5.3 初始化评论

由于评论存储在github仓库issue中，没有任何文章的信息，所以需要先对每个文章初始化一个评论，后续的评论将会依附在初始评论下

5.3.1 获取初始化评论的token

点击这里创建access token用于初始化认证,选中红框内的条目，描述随意填写

复制你的access token，之后将不在显示

5.3.2 添加自动初始化脚本

在本地仓库根目录下新建comment.js文件，将以下js代码粘贴到comment.js文件中，脚本将会在部署的时候自动初始化评论。请注意替换脚本中的帐户信息

const request = require("request");
const fs = require("fs");
const path = require("path");
const url = require("url");
const xmlParser = require("xml-parser");
const YAML = require("yamljs");
const cheerio = require("cheerio");
// 根据自己的情况进行配置
const config = {
    username: "github_name", // GitHub 用户名
    token: "824c5d68b801b4255f0738cb91e0f893c443739f",  // GitHub Token
    repo: "github_name.github.io",  // 存放 issues的git仓库
    // sitemap.xml的路径，commit.js放置在根目录下，无需修改，其他情况自行处理
    sitemapUrl: path.resolve(__dirname, "./public/sitemap.xml"),
    kind: "Gitalk",  // "Gitalk" or "Gitment"
};
let issuesUrl = `https://api.github.com/repos/${config.username}/${config.repo}/issues?access_token=${config.token}`;

let requestGetOpt = {
    url: `${issuesUrl}&page=1&per_page=1000`,
    json: true,
    headers: {
        "User-Agent": "github-user"
    }
};
let requestPostOpt = {
    ...requestGetOpt,
    url:issuesUrl,
    method: "POST",
    form: ""
};

console.log("开始初始化评论...");

(async function() {
    console.log("开始检索链接，请稍等...");
    
    try {
        let websiteConfig = YAML.parse(fs.readFileSync(path.resolve(__dirname, "./_config.yml"), "utf8"));
        
        let urls = sitemapXmlReader(config.sitemapUrl);
        console.log(`共检索到${urls.length}个链接`);
        
        console.log("开始获取已经初始化的issues:");
        let issues = await send(requestGetOpt);
        console.log(`已经存在${issues.length}个issues`);
        
        let notInitIssueLinks = urls.filter((link) => {
            return !issues.find((item) => {
                link = removeProtocol(link);
                return item.body.includes(link);
            });
        });
        if (notInitIssueLinks.length > 0) {
            console.log(`本次有${notInitIssueLinks.length}个链接需要初始化issue：`);
            console.log(notInitIssueLinks);
            console.log("开始提交初始化请求, 大约需要40秒...");
            /**
             * 部署好网站后，直接执行start，新增文章并不会生成评论
             * 经测试，最少需要等待40秒，才可以正确生成， 怀疑跟github的api有关系，没有找到实锤
             */
            setTimeout(async ()=>{
                let initRet = await notInitIssueLinks.map(async (item) => {
                    let html = await send({ ...requestGetOpt, url: item });
                    let title = cheerio.load(html)("title").text();
                    let pathLabel = url.parse(item).path;
                    let body = `${item}<br><br>${websiteConfig.description}`;
                    let form = JSON.stringify({ body, labels: [config.kind, pathLabel], title });
                    return send({ ...requestPostOpt, form });
                });
                console.log(`已完成${initRet.length}个！`);
                console.log("可以愉快的发表评论了！");
            },40000);
        } else {
            console.log("本次发布无新增页面，无需初始化issue!!");
        }
    } catch (e) {
        console.log(`初始化issue出错，错误如下：`);
        console.log(e);
    } finally {
    
    }
})();

function sitemapXmlReader(file) {
    let data = fs.readFileSync(file, "utf8");
    let sitemap = xmlParser(data);
    return sitemap.root.children.map(function (url) {
        let loc = url.children.filter(function (item) {
            return item.name === "loc";
        })[0];
        return loc.content;
    });
}

function removeProtocol(url) {
    return url.substr(url.indexOf(":"));
}

function send(options) {
    return new Promise(function (resolve, reject) {
        request(options, function (error, response, body) {
            if (!error) {
                resolve(body);
            } else {
                reject(error);
            }
        });
    });
}

5.3.3 一行命令部署

在终端或cmd进入本地仓库根目录下，执行之前部署到远程的命令加上初始化评论的命令即可将可评论的新版本推送到线上

跳过，直接一行命令部署

hexo clean # 清除缓存
hexo generate # 生成静态文件
hexo deploy # 部署到远程仓库
node ./comment.js # 初始化评论

首先将上面的多行命令按json的格式添加到本地仓库根目录下的package.json文件末尾

多行命令的json格式

"scripts": 
  {
    "deploy": "hexo clean && hexo generate && hexo deploy && node ./comment.js"
  }

一行命令部署,后续博客的修改、文章的发布后只需要执行这一行命令即可更新发布到远程仓库

npm run deploy

6 访问量统计

点击这里注册腾讯分析账号，在个人->站点列表中添加站点(博客地址)

然后将站点统计的ID放到博客所用的主题下的_config.yml文件对应的腾讯统计下，也可以自己将统计的代码放到博客网页中

<script type="text/javascript" src="https://tajs.qq.com/stats?sId=ID" charset="UTF-8"></script>

7 更换主题和更新文章

7.1 更换主题

可在Hexo官网下载自己感兴趣的主题

• 将主题文件夹放在本地仓库根目录下的themes文件夹下
• 修改本地仓库根目录下的_config.yml文件中的themes

7.2 更新文章

只需将新的markdown类型的文章放置在本地仓库根目录下的sources->_posts文件夹下即可

须注意在文章开头要标明文章标题、所属分类、以及标签。格式如下

---
title: HelloWorld
tags:
   - hello
   - blog
categories:
   - Other
---

8 注意事项

• 文章的github_name为自己的Github用户名
• 博客根目录和主题文件夹下都存在source文件夹和_config.yml文件，注意区分
• 对本地博客项目做了修改后，需要执行一行命令才会推送到远程仓库上
• 可在个人Github远程仓库(存放博客项目)的设置下的pages服务中开启https
• 本文章案例所用的主题为snippet
• 可根据自己的兴趣增加博客的功能，具体设置在博客项目根目录下的_config.yml和主题根目录下的_config.yml
• 可根据自己的兴趣修改博客页面

参考资料

• Hexo官方文档
• snippet
• nodejs版本的Gitalk/Gitment评论自动初始化