这个博客的建立过程

1 前言

之前也说了,我是用的Github Page加Hugo的方式搭建的博客,其实还有很多比如jekyll、hexo等部署静态网站的工具;而托管的服务器方面,有的大佬选择直接自己租一台,还有一些途径我就不多说了。

github pages直接托管在github上,比较方便所以很多人都用的这种方式,不过要求至少要会一点git控制命令,git相关教程我记得放在bookmarks里了,真正常用也就那么几个语句,比较容易上手。而之所以选择hugo纯粹是因为朋友推荐,我搭好了之后看有的hexo主题写的特详细,顿时有点后悔,觉得自己走了很多弯路,不过hugo也是很好用的虽然网上资料可能不是太多。

接下来我就详细叙述下这个博客的建立的过程,我也是萌新有些地方具体的原理可能不太清楚,不过只要搭的像个样子不就行了。

2 步骤

2.1 安装 hugo、git、nodejs

用hugo部署网站一般先是在本地调试,通过hugo server命令可以在浏览器http://localhost:1313 查看效果,然后用git将文件传到github里;nodejs是之后给网页加一些模块脚本要用的,用的机会不是很多。具体的安装步骤我觉得就没必要讲了,百度一下一大把的东西,又不复杂。

2.1.1 常用的Git命令

  1. 克隆远程库: git clone+目标库网址\\
    (如git clone https://github.com/chengpengzhao/latex_htm_zcp

  2. 添加远程库: git remote add origin+目标库网址,若提示失败在前面用 git remote rm origin 命令。

  3. 同步到本地库:git pull origin master ,这个时候再使用命令:git push -u origin master 就能将本地库的内容推送到远程仓库;加上了-u参数,Git不但会把本地的master分支内容推送的远程新的master分支,还会把本地的master分支和远程的master分支关联起来,在以后的推送或者拉取时就可以简化命令。下一次直接使用 git pull 或者git push.

  4. 本地修改完进行同步:

    git add -A (注意下add各参数的意义)

    git commit -m "your message"

    git push origin master

    2.2 hugo的文件夹结构

我的hugo文件夹如图hugo一般是这些文件夹(除了node_modules)加上一个config.toml配置文件(还有些文件是我后来写的上传东西用的脚本)。

  • archetypes:放模版文件?这个我真不知道有啥用,具体看hugo文档肯定有说明

  • content:写的文章都放这里面,md格式,要写博客markdown语法必须要先学一学

  • data:我的是空的,不知道干嘛的

  • layouts:十分重要!网页的结构全在里面,各种html代码

  • public:用hugo生成网页后的文件,把这些上传到github里就够了,所以通常在public文件夹里面建立.git项目。

  • resources:我的是空的

  • static:有三个文件夹,css里面放字体文件,img放图片,js放网页加载时所用的脚本。

  • themes:下载后的主题放在这里面,不过我一般把主题自己修改后里面的东西挪到layouts和static里,所以我这里面也是空的。

  • config.toml:配置文件,一般每个主题都会说明下这个文件怎么写。

推荐先在本地把网站安排好了再上传,不然改来改去很麻烦。

2.3 下载hugo主题

https://themes.gohugo.io/上可以找到很多好看的主题,仔细阅读所选主题的相关说明,把它下载到本地,把各个文件夹里的东西放到hugo的相应文件夹里,然后用hugo命令在本地查看效果。一般主题都会有一个exampleSite,可以看看里面config.toml设置和文章的格式。(必须先熟悉hugo文件夹结构后再进行这一步)

hugo server启动后网页(localhost1313)显示的内容会随着你的修改实时变动,所以在写博客时十分好用,这也是hugo的一大优点吧。

2.4 熟悉所下载主题的模块

如果你想要自己对主题做一些修改,比如加入评论系统啊、显示来访数、动态效果、搜索功能……那就必须经过最苦逼的这一个步骤了,把主题layouts和static里的文件一个个的啃一遍,知道每个文件大概实现了什么功能。一般好一点的主题都会说明一下它有哪些模块,怎么加入一些常用模块;总之在这方面花的时间应该是最多的。

建议把这部分放在最后进行,或者干脆不做修改直接拿他的主题用也行。下面我简单分类介绍下我博客中这几个模块添加的艰辛历程:

2.4.1 访问计数模块

我用的是不蒜子网页计数器,这个还比较简单,layouts文件夹里相应的html位置加入代码就行。

2.4.2 评论模块

由于在国内,某些评论系统被墙不好用,我用的是Valine的评论系统,也是在相应的html中插入代码;这里要注意页面的格式设置,可能会造成字体、方框大小不太合适,这时候要在css文件中修改格式。常采用开发者工具先找到控制对应字体的文件位置,再做相应修改。

2.4.3 搜索模块

我的主题自带了对algolia搜索模块的支持,所以注册、设置下来没有花太多功夫,这个好像还要装到本地,然后每次写了posts之后要用npm run algolia命令更新索引目录。

2.4.4 数学公式模块

Mathjax没得说。

2.4.5 特殊效果模块

可以加入一些动态背景效果(比如像我这样),或者甚至你可以加一个live2D的看板娘。

3 总结

不要在意具体的细节,知道代码的作用、大体的框架、实现的方式,然后进行粗略的调整就行了。如果把这些代码看成是一个个贴了标签的黑盒,那么对于我们这些非专业人士来说,读懂标签就够用了。

Author: zcp
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source zcp !
 Previous
本地LaTeX公式实时编辑器(个人用)
1 LaTeX 公式编辑 with MathJax by zcp1.1 MathJax官网 :MathJax 1.2 codecogs就是从这个网站抄下来的:codecogs 1.3 tablesge
Next 
日本語の方言_方言を勉強しよう
1 関西弁講座関西弁には、近畿方言の一つである。でも関西といっても地域によって話すことばやイントネーションがまったく異なる。だから大阪弁、京都弁、神戸弁のような言い方もある。 1.1 「~しはる」$「~しています」→「~
  TOC