基于hexo+GitHub Pages建立静态博客的泛用型指南

3321 个字

基于hexo+GitHub Pages建立静态博客的泛用型指南

前几年玩过 WordPress 建站,其实还蛮好玩的,也正是因此为契机才正式接触到了编程。整了一年的服务器最后发现一年下来也就写了十来篇,也就懒得续费了。时值 HTML 5 的规范刚定了下来,微信公众号在乱军中杀出一条血路。好像 hexo 与 GitHubpages 也是当年出来的,总而言之当年服务器懒得续费之后便把文章转向了 GitHubpages 和微信公众号两边。

当年的微信公众号才起步,网页编辑器甚至可以改 HTML 源码,而对应的 GitHub pages 这边就很麻烦,要先写好文章,再在本地生成文件,再提交到服务器。因为我一开始便是接触的 WordPress 这种可以直接在网页上编辑的动态博客,对于静态博客这种东西还是不那么喜欢。渐渐地我就没去管静态博客了。

2020年初,中国遭遇到了名为 2019-nCoV 的病毒所威胁,这个事件待疫情结束后我再看看记录不记录吧。总而言之,[2020/2/7] 我在微信公众号上久违地更新了一篇《小学生观察笔记》,然后在阅读只有 2 的情况下因为“遭到多人举报而删除”了。毕竟大公司也要恰饭,思来想去我便把公众号注销了,同时开始从头维护一个博客。

本文用于记录博客的建立与维护。

常驻系统为 win 10 所以本文主要面向 Windows系统 。但我也是菜鸡一个,如果有其他的人看到了这篇文章觉得哪里不对可以教教我;个人博客,喷子大可不必,直接右上角即可关闭。

首先确立流程:

  1. 安装 Git
  2. 安装 Node.js
  3. 安装 hexo
  4. GitHub 创建个人仓库
  5. 生成 SSh key 并添加到 GitHub
  6. 将 hexo 部署到 GitHub
  7. 建站完成,然后开始写泛用性指南

1、安装 Git

Git 是个将本地文件更方便上传到 GitHub 去的工具,还是个很优秀的版本管理系统。以后要是有心情,就再细细去学 git 的教程。

**下载地址:**从官网下载Git即可,安装选项全部默认就行了。

后文的“输入”默认都是用 git 执行

ps:可以在cmd里输入 git -v 查看版本信息确认是否安装成功。

pps:cmd是指命令提示符,开始菜单输入cmd即可打开。

2、安装 Node.js

Hexo 基于 Node.js 编写,所以需要安装 Node.js。

**下载地址:**同样是官网下载稳定版即可。安装同样是全部默认。

ps:在 cmd 输入 node -v 查看版本信息确认是否安装成功。

3、安装 Hexo

前期准备到此为止,这里开始进入正题。

首先在你想要的地方创建一个文件夹“小学生的秘密基地”,用于存放blog文件。

在文件夹内右键选择 ‘Git bash here’,用于定位到该目录。

输入 npm install hexo-cli -g,用于安装 Hexo。或许有报错,但没关系。

ps:输入 hexo -v 确认版本信息确认是否安装成功。

输入 hexo init Blog 初始化网站,代码中的 Blog 叫啥都行,后文默认 Blog 文件夹为根文件夹

输入 cd blog 进入博客文件夹。

输入 npm install 安装必备组件。

至此,Blog 目录下应该生成了些许文件:

  • public:存放生成的页面
  • scaffolds:生成文章的模板
  • source:存放写的文章
  • themes:主题
  • _config.yml:博客的配置文件

可以用记事本稍微修改修改下配置文件。

输入hexo g 生成静态页面。

输入 hexo s 打开本地服务器可以本地预览,我以后基本都省略了这步。

在浏览器中打开 http://localhost:4000就可以看到博客的预览了。

Ctrl+c关闭本地服务器。

4、创建 GitHub 仓库

没注册的先注册,用户名就是将来的域名前缀。

新建项目仓库:New repository,项目名就是 yourname.github.io ,这里的yourname 就是你的用户名,我记得不是自己的用户名那个域名就会很长,虽然可以通过绑定自己的个人域名来解决。总之问题不大。

  • 记得勾选README的初始化。

创建完成后,仓库的右侧有个 settings 按钮,下拉有个 GitHub Pages 的分栏,Source里应该有个选项,选 master branch 就会将你的网站在那个后缀为‘GitHub.io’的链接上公开。

5、生成 SSH key 并部署到 GitHub

整这玩意就是为了以后上传文件的时候不用输密码(除非你在设置 ssh key 的时候设置了密码)

首先创建一个 ssh key :

输入:ssh-keygen -t rsa -C "your_email@example.com"

邮箱名想改的改,不改会不会出错我没试过。

这时候会让你输入一个文件名,用于保存刚才生成的 ssh key ,我换了几个文件夹都没成功,不输入直接回车默认倒成功了。

接着会提示你输入两次密码(是ssh key 的密码,用于日后 push 文件时要输的)直接回车,以后轻松。

接下来显示什么Your public key has been saved 啥的就表示你的ssh key已经创建成功了。

添加你的 ssh key 到 GitHub 上:

输入 clip < ~/.ssh/id_rsa.pub ,用于拷贝id_rsa.pub 文件里的内容。不嫌麻烦用记事本打开复制应该也是可以的。

登录 GitHub 账号,右上角Account Setting ,选择菜单栏里的 SSH key 。

点击 Add SSH key,把刚刚复制的内容粘贴单到对应输入框(前后不要有空格),Title的输入框里随便取个名字就行。

输入 ssh -T git@github.com

会显示 Are you sure you want to continue connecting (yes/no)?

输入 yes

这时候会要你输密码。就刚刚的ssh key的密码。

总之成功会有 successfully 的字眼,失败会有 denied 字眼。

6、部署 hexo 到 GitHub

最后一步了,博客根目录输入 npm install hexo-deployer-git --save 安装 deploy-git。

修改根目录下的config文件:

deploy: type: git epository: 你GitHub项目地址,例如我的:https://github.com/singlebee/singlebee.github.io branch: master

然后输入 hexo clean 清除你生成的东西,有时候改了东西网页却没变可以用这个清除一下。在某些情况(尤其是更换主题后),如果发现对站点的更改无论如何也不生效,就可能需要运行该命令。

输入 hexo g 生成静态文件

输入 hexo d 部署到服务器

ps:deploy阶段可能会弹出要求输入密码

过一小会就可通过之前的 GitHub pages 设置的域名打开博客了。

7、写文章

[2020/2/7] 基于hexo+GitHub Pages 建立了本博客,不但简陋而且粗糙。

这篇文章是用 Tea 这个客户端编写文件,再导出为 Markdown 格式的文件,再拖入 根目录\source\_posts 目录下,vscode倒也能实时预览 .md 文件,但总感觉没这个轻便。

写完后在根目录输入 hexo g -d 便可以更新博客了。相比于在网页编辑好再发送 还是麻烦了点。

这一部分主要用于记录日后的更新。从此处开始往下的内容将不再是面向小白读者,自娱自乐的内容,酌情观看。

[2020/2/8] 替换了主题 Nexmoe

一个比较特别的Hexo主题:GitHub地址

更换主题

主题的更换十分简单,基本思路就是在网上找喜欢的 theme ,将其复制到 博客根目录\theme 下,修改根目录下的config文件,将theme相关的内容改为需要的主题。

以下为 Nexmoe 主题的更换教程:

cd themes # 载入主题目录git clone https://github.com/nexmoe/hexo-theme-nexmoe.git nexmoe # 安装cd nexmoe # 进入 Nexmoe 主题目录npm i --save hexo-wordcount# Node 版本 7.6.0 之前,请安装 2.x 版本 (Node.js v7.6.0 and previous) # npm install hexo-wordcount@2 --savecp -i _config.example.yml _config.yml修改博客配置文件

更多主题可以前往hexo主题官网查看。

[2020/2/9] 添加了建站时间。

添加建站时间

之前 WordPress 站点里就整了这个,很喜欢这个功能。基本逻辑如下:

  1. 创建一个时间点,用作建站时间A
  2. 获取当前时间点B
  3. B-A=建站时间(秒)
  4. 将秒换算成天

没找到footer,估计这个主题没有footer,把信息写在了header里了。

修改根目录\themes\nexmoe\layout\_partial\header.ejs
找到合适的地方加进去

<span id="sitetime"></span>
<script language=javascript>    function siteTime() {        window.setTimeout("siteTime()", 1000);        var seconds = 1000;        var minutes = seconds * 60;        var hours = minutes * 60;        var days = hours * 24;        var years = days * 365;        var today = new Date();        var todayYear = today.getFullYear();        var todayMonth = today.getMonth() + 1;        var todayDate = today.getDate();        var todayHour = today.getHours();        var todayMinute = today.getMinutes();        var todaySecond = today.getSeconds();        var t1 = Date.UTC(2020, 02, 07, 22, 00, 00); //建站时间 2020-2-07 22:00:00        var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);        var diff = t2 - t1;        var diffYears = Math.floor(diff / years);        var diffDays = Math.floor((diff / days) - diffYears * 365);        var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);        var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes);        var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds);        //还没一年,注释掉年        //document.getElementById("sitetime").innerHTML = "本站已运行 " +diffYears+" 年 "+diffDays + " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";        document.getElementById("sitetime").innerHTML = "本站已稳定运行 " +diffDays + " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";    }    siteTime();</script>

待解决事项:

  • index 页面上文章图片问题(目前认为过大)
  • 文章页面的copyright和index下的copyright未统一
  • 头像和网页icon还未添加
  • 404页面还未制作
  • tag 的引入
  • 考虑在侧边栏添加一个网易云音乐的播放列表
  • 已加入的文章的头图需要更换
  • todo list前的样式希望隐藏去黑点
  • 背景想换
  • more…

[2020/2/7] 注销了微信公众号(于同月9号恢复注销,仅是为了同步文章时间)

[2020/2/7] 建立博客

[2020/2/8] 替换主题

[2020/2/8] 初步完工《泛用性指南》

[2020/2/9]

  1. 主题更换及添加建站时间
  2. 调整了copyright部分的样式
  3. 调整了文章页面的样式
  4. 替换了头像
  5. 新增了颜文字抖动特效
  6. 给已有文章添加了tags
  7. 替换了文章头图
  8. 添加了favicon
不要转载 | 去热爱自己的生活

最后更新于 2023 年 12 月 7 日