2021-06-05

开发内容

以Hexo1作为框架,利用靓丽的主题生成静态网站

开发过程

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>
  • 添加分类页面

2021-06-05

  • 添加归档页面
    2021-06-05

  • 添加背景音乐
<!--音乐播放插件-->
			<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. 背景音乐过于单调,希望能增加一个播放器,以便更多选择。

如何解决问题

  1. 本地仓库与远端仓库默认分支不一致的问题。通过查阅资料得知,2020年10月1日起,github仓库的默认分支改为了’main’。

  2. 照片无法正常加载。计划通过改变上传保存图片的途径,不再使用github的远端仓库当作图床,而是使用像七牛云这类的图床来进行图片的上传与存储。

  3. 留言评论功能的缺失。计划采用valine 评论系统,修改 hexo 博客目录的 theme/yilia 中的 _config.yml 文件,在 yilia 中的 layout/_partial/post 下新增 valine.ejs文件,修改 yilia 中的 layout/_partial/article.ejs 文件。

  4. 背景音乐过于单调。添加 APlayer 音乐播放器。

总结

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

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


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

上一篇:使用github搭建hexo博客


下一篇:使用Github Pages和Hexo搭建自己的独立博客【超级详细的小白教程】