Huang Fan

Homepage

发表于 更新于 分类于

本次博客搭建流程大概分为3个步骤，分别是环境搭建，功能设计与实现和环境部署

环境搭建

前期工作包括配置git，nodejs的环境。

框架选择

由于之前配置hyperCRX的环境已经安装了nodejs,所以就选择了Hexo框架。在安装好hexo环境有遇到报错
bash: hexo: command not found
先检查了node和npm是否安装成功，然后发现与nodejs安装过程一样，需要配置系统环境变量才行，将node_modules下的.bin路径添加到path环境中即可

博客主题选择

博客主题选择了hexo下的next主题，因为简洁，参考的开发文档比较齐全。

功能设计与实现

页面布局以及实现

博客共设计了首页（文章列表），标签，分类，归档和我的五个静态页面，生成新的静态页面使用hexo new 命令，对于tag和catagories页面需要修改对应index.md对应的属性，然后在全局config配置中中加入对应的跳转指令即可。基本个人的信息也是在全局config中修改，这是站点配置文件；在next主题下也有config文件，这是主题配置文件。对于博客主题样式的修改，如添加背景图片，网站logo图片和GitHub链接等样式修改是这next的主题配置文件中修改的。

页面美化

首页若不加修饰会展示文章的所有内容，只展示部分内容需要加入页面截断，可以在需要截断的地方加入下面的代码示例

<!--more-->

隐藏底部强力驱动需要修改themes/next/_config.yml文件,将powered和enable设置为false

博客插入图片

遇到加载本地的图片不显示，参考了https://www.jianshu.com/p/f72aaad7b852
解决方法：安装hexo-asset-image插件，修改comfig.yml中的post_asset_folder字段，并且修改了/node_modules/hexo-asset-image/index.js文件的内容
加载并修改图片的大小使用的下面的代码示例

<div align=center>
<img src="picture-1.jpg" width = 65%>
</div>

博客部署

最后将静态网站上传到GitHub仓库中，上传博客使用的是hexo-deployer-git工具，修改config文件中的deploy字段终端运行即可上传。
遇到几个问题：

  • 下载hexo-deployer-gi时NPM报错npm ERR! code ETIMEDOUT npm ERR! syscall connect npm ERR! errno ETIMEDOUT npm ERR!
    解决方法是设置代理关毕
    npm config set proxy false

  • 在git上传提交时会报错不能提交到我想部署的网站，fatal: unable to access ‘https://github.com/huangfan0/huangfan0.github.io.git/‘: Failed to connect to github.com port 443 after 21079 ms: Couldn’t connect to server FATAL Something’s wrong.
    解决方法是取消https代理
    git config –global –unset https.proxy
    git config –global –unset http.proxy

  • 最后在GitHub搭建的网页只显示文字，不显示主题，并且点击文章详情会报错404无法显示网页
    是因为我的配置文件中url多写一个文件，填写的部署根目录，资源加载不了，改为url: https://huangfan0.github.io即可。

0%