总结报告
本次博客搭建流程大概分为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即可。