关于Hexo搭建

开发内容

以Hexo¹作为框架，利用靓丽的主题生成静态网站。

开发过程

Hexo搭建步骤

安装Git
安装Node.js
安装Hexo
将hexo部署到GitHub
完善网站

安装Git

Git是目前世界上最先进的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。也就是用来管理hexo博客文章，上传到GitHub的工具。

Windows：到git官网上下载，Download git，下载后会有一个Git Bash的命令行工具，以后就用这个工具来使用git。

Linux：对linux来说实在是太简单了，因为最早的git就是在linux上编写的，只需要一行命令。

> sudo apt-get install git

安装好后，用 git --version 来查看一下版本

安装Node.js

Hexo是基于Node.js编写的，所以需要安装一下Node.js和里面的npm工具。

Windows：Node.js选择LTS版本。

Linux：

sudo apt-get install nodejs
sudo apt-get install npm

安装完后，打开命令行

node -v
npm -v

检查一下有没有安装成功

配置Hexo

前面git和nodejs安装好后，就可以配置hexo了，先创建一个文件夹blog，然后cd到这个文件夹下（或者在这个文件夹下直接右键git bash打开）。

输入命令

npm install -g hexo-cli

依旧用hexo -v查看一下版本

接下来初始化一下Hexo

hexo init blog

进入该文件夹并更新npm

cd blog 
npm install

新建完成后，指定文件夹目录下有：

node_modules: 依赖包
public：存放生成的页面
scaffolds：生成文章的一些模板
source：用来存放你的文章
themes：主题
config.yml: 博客的配置文件

hexo g
hexo server

打开hexo的服务，在浏览器输入localhost:4000就可以看到生成的博客。

将Hexo部署到GitHub

这一步，就可以将hexo和GitHub关联起来，也就是将hexo生成的文章部署到GitHub上，打开站点配置文件 _config.yml，翻到最后，修改为
YourgithubName(GitHub账户)。

deploy: type: git repo:
https://github.com/YourgithubName/YourgithubName.github.io.git
branch: master

这个时候需要先安装deploy-git ，也就是部署的命令，这样才能用命令部署到GitHub。

npm install hexo-deployer-git --save

然后

hexo clean
hexo generate
hexo deploy

其中 hexo clean清理生成的缓存。
hexo generate 顾名思义，生成静态文章，可以使用 hexo g缩写。
hexo deploy 部署文章，可以使用hexo d缩写。
注意deploy时可能要你输入username和password。

完善网站

• 添加相册页面

在本地和Github上分别创建相册仓库，并用git将两者关联起来。使用python脚本对图片进行相应的处理。然后再用git把本地照片push到github对应的仓库里。

<link rel="stylesheet" href="./ins.css">
<div class="photos-btn-wrap">
	<a class="photos-btn active" href="javascript:void(0)">Photos</a>
	<!-- <a class="photos-btn" href="#">待续</a> -->
</div>
<div class="instagram itemscope">
	<a href="https://Charondown.github.io/" target="_blank" class="open-ins">图片正在加载中…</a>
</div>
<script>
  (function() {
    var loadScript = function(path) {
      var $script = document.createElement('script')
      document.getElementsByTagName('body')[0].appendChild($script)
      $script.setAttribute('src', path)
    }
    setTimeout(function() {
      loadScript('./ins.js')
    }, 0)
  })()
</script>

• 添加分类页面

• 添加归档页面
  
  
  
• 添加背景音乐

<!--音乐播放插件-->
			<div style="margin-top:30px;">
				<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=220 height=86 src="//music.163.com/outchain/player?type=2&id=1378631615&auto=1&height=66"></iframe>
			</div>

• 添加统计网站访问量

# PV方式，单个用户连续点击 n 篇，记录 n 次记录值
<span id="busuanzi_container_site_pv">    本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>

# UV方式，单个用户连续点击 n 篇，记录 1 次记录值
<span id="busuanzi_container_site_uv">  本站访客数<span id="busuanzi_value_site_uv"></span>人次</span>

• 网站运行时间

			<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
			<script>
				var now = new Date(); 
				function createtime() { 
					var grt= new Date("11/23/2018 20:00:00");//此处修改你的建站时间或者网站上线时间 
					now.setTime(now.getTime()+250); 
					days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); 
					hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); 
					if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); 
					mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} 
					seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); 
					snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} 
					document.getElementById("timeDate").innerHTML = "本站已运行 "+dnum+" 天 "; 
					document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒"; 
				} 
				setInterval("createtime()",250);
			</script>

• 单篇文章点击量
• 文章文字统计与阅读时间推荐
• 评论功能
• 打赏功能
  
  

开发问题

1. 文件的配置。
2. 环境的搭建。
3. 工具的安装。
4. 样式的选择。
5. 功能的完善。
6. 网站的搭建。
   
   

已解决的问题

• 文件的配置。
  通过网络查询相关资料解决。比如在配置config文件过程中，出现格式的错误（空格的使用、符号的全角与半角混乱等等）、部分配置未添加、配置添加错误。
• 环境的搭建。
  Hexo的安装与配置。
• 工具的安装。
  比如Node.js、git、npm、vim以及它们的相关安装。出现了路径问题、版本的不兼容等问题。通过网络查询相关资料解决。
• 网站的搭建。

1. 出现了本地仓库与远端仓库无法正常连接的问题：
   1、由于git账号未正常绑定。
   2、远端仓库名更改后，未更改本地配置文件。
   3、指定分支与远端仓库默认分支不同。//现在默认分支是’main’
   
   
2. 本地照片无法正常加载：
   1、dns污染
   2、host设置错误
   3、官方更新了dns，但是dns缓存没有被更新，导致错误解析。

未解决的问题

• 样式的选择。
  整个网站样式并没有达到我想要的最好效果。
  
  
  
• 功能的完善。

1. 相册功能过于简略，希望能增加文字说明，而不是单纯的照片描述。

2. 照片无法正常浏览。由于是将github的仓库当作图床，而github里面的照片存放在亚马逊s3上，该服务器是github的素材服务器 (assets server)，是为了避免跟主服务抢占负载。修改了本地设备的IP，但是照片在其他设备上仍然无法正常浏览。

3. 留言评论功能未完成搭建。

4. 背景音乐过于单调，希望能增加一个播放器，以便更多选择。

如何解决问题

5. 本地仓库与远端仓库默认分支不一致的问题。通过查阅资料得知，2020年10月1日起，github仓库的默认分支改为了’main’。
   
   
6. 照片无法正常加载。计划通过改变上传保存图片的途径，不再使用github的远端仓库当作图床，而是使用像七牛云这类的图床来进行图片的上传与存储。
   
   
7. 留言评论功能的缺失。计划采用valine 评论系统，修改 hexo 博客目录的 theme/yilia 中的 _config.yml 文件，在 yilia 中的 layout/_partial/post 下新增 valine.ejs文件，修改 yilia 中的 layout/_partial/article.ejs 文件。
   
   
8. 背景音乐过于单调。添加 APlayer 音乐播放器。

总结

1. 对于文件操作、文件结构与类型有了更多的了解。
2. 了解并掌握了一点EJS这种嵌入式JavaScript模板引擎。
3. 对于CSS有了更深入的了解。 比如样式化文本、CSS的布局。
4. 对于JS动态生成页面有了更多的理解。

生成的元素是一个完整的DOM对象；这些DOM对象的属性可以是字符串，xml文件，也可以是json格式的数据，存储在后台或者其它位置；通过层层解析，顺着DOM层级关系动态创建在html文档流中；这些html文档放于不同的模板文件中相应生成不同样式的效果。

---

1. 一个简洁、高效的基于Node.js的静态博客框架。 ↩︎