张天昀的个人博客

博客搭建详解教程

2020年01月08日

博客是什么,怎么样搭建自己的博客?搭建博客是什么意思出自哪里?为什么一瞬间就有好多人搭建自己的博客?为什么大家都在搭建自己的博客?相信不少同学都想了解这个操作,下面就让小编来为大家介绍一下搭建自己博客的详细内容。

选择博客架构

自建博客平台的架构很多,常见的有以下几种:

名称 语言 许可证 优点 缺点
WordPress PHP GPL 功能全 需要PHP和数据库
Markdown支持性差
Drupal PHP GPL 功能全 需要PHP和数据库
OctoberCMS PHP 私有 Laravel 需要PHP和数据库
Typecho PHP GPL 没用过不知道 需要PHP和数据库
Jekyll Ruby MIT 老牌 需要Ruby
Hexo Node MIT 方便简单
主题多
需要Node
很多主题花里胡哨
Hugo Go Apache 方便
二进制打包
开发中
主题少
Gatsby Node MIT 功能全
基于React
需要Node
开发变化大,不稳定

如果想要全方面的功能(自建搜索、评论等),可以考虑使用PHP搭建博客;如果想事少点,就用静态页面生成器,下文即以Hugo为例。(我是真的不喜欢Hexo)

Hugo的GitHub仓库可以下载到二进制可执行文件,建议直接下载Hugo-extended,包含SASS编译等额外功能。

  • 在Windows环境下,下载.zip压缩包,将二进制文件解压缩到$PATH的任一目录下即可;
  • 在GNU/Linux下安装大致相同。特别是Debian系可以下载.deb文件,然后用dpkg安装即可。

安装后检测版本:

PS Z:\somewhere> hugo version
Hugo Static Site Generator v0.62.0/extended windows/amd64 BuildDate: unknown

然后使用Hugo创建一个新的站点:

PS Z:\somewhere> hugo new site mysite
Congratulations! Your new Hugo site is created in Z:\somewhere\mysite.

进入文件夹后可用hugo server来运行本地服务器,或者直接运行hugo生成静态页面文件。

PS Z:\somewhere> hugo server -build-future
Building sites … 

创建博客内容

博客主题

官方主题列表有很多好看的主题,此处直接推荐zzw同学搬运的本人主题(x

链接:https://github.com/zhengzangw/hugo-theme-ztyblog

博客的主题可以放置在/themes文件夹下(方便多个主题切换),也可以直接覆盖根目录下的文件。

配置文件

Hugo的配置文件是根目录下的config名称的文件,支持JSON、YAML、TOML三种格式。

一些比较重要的点:

  • 网站名称、网站地址、作者信息
  • 网站语言、渲染页面和文件的参数
  • 其他主题自定义参数

配置文件中的参数可以通过{{ .Site.Params }}进行访问,具体见官方文档

布局文件

布局文件都在/layouts文件夹下,默认都是.html格式,此处只介绍简单用法,具体见官方文档

每一个文件夹对应一种类型的文档,每个文件夹下有single.html以及list.html两种文件,分别对应单个页面(page)和列表页。常见的用法有:

  • {{ .Pages }}获取当前文件(夹)下的所有子页面
  • {{ .Parent }}获取当前页面的上一级页面
  • {{ .Title }}获取当前文件的标题
  • {{ .Summary }}获取当前文件的概括(默认约70词)
  • {{ .Params }}获取当前文件中定义的参数
  • {{ .Content }}获取当前文件的内容

在编写布局文件的时候,可以用到一些函数,具体见Go的模板语言以及Hugo函数文档

  • {{ partial "foo.html" . }}引用/layouts/partial/foo.html中的内容
  • {{ $var := val }}定义变量
  • {{ val | func }}管道
  • {{ if boolean }}{{ else }}{{ end }}判断条件
    • 可以使用gtgeltleeqne进行比较
    • 可以使用notorand进行逻辑运算
  • {{ with sth }}{{ end }}判断是否为空
  • {{ len list }}获取长度(可以是列表、字符串等)
  • {{ range list }}{{ end }}遍历列表

编写内容

有了布局之后只需要写博客就可以了。不同的博客页面种类可以在/archetypes文件夹中定义模板,以博客文档为例,参考如下:

+++
title = "{{ replace .Name "-" " " | title }}"
date = {{ .Date }}
+++

文档的首部可以用YAML(---)、TOML(+++)、JSON或ORG,具体见官方文档

其中date是发布文档的时间,如果渲染时间小于发布时间,或者晚于过期时间,或者标记为draft = true则不会渲染对应的页面。具体见官方文档

写好后用hugo new [type] file指令生成新的页面:

PS Z:\somewhere> hugo new post .\content\blog\foo.md
Z:\somewhere\mysite\content\content\blog\foo.md created

这样一来Hugo就会将/content/blog/foo.md渲染成/blog/foo/index.html文件。在浏览器中可以访问http://localhost:1313/blog/foo/(注意最后的/)进行访问。

如果想要添加静态文件(如图片),只需要将文件摆放到/static/blog/foo/文件夹下即可。例如

![Picture](bar.png) --> /static/blog/foo/bar.png

部署到服务器

写完博客就可以生成静态页面并部署到服务器了。此处介绍三种方式:

方法 价格 优点 缺点
GitHub Pages 免费 操作最简单 加载太慢
自建HTTP Server 取决于服务器 全方位控制 需要运维能力
使用对象存储 相当便宜 无需自己维护 难以调试
接口可能不同

GitHub Pages

很简单,开一个自己名称的xxx.github.io仓库,然后把静态页面文件传到仓库里就完事了。

如果觉得github.io网址和CSDN博客一样土,可以用CNAME进行重定向,见GitHub官方指南

HTTP Server

  • 买一个有公网IP的服务器
  • 打开防火墙的80/443端口
  • 安装并运行一款HTTP Server
  • 把静态页面文件传到服务器上

Object Storage

具体可参考基于COS+CDN的超廉价自动部署博客方案

  • 开通某个平台的对象存储
  • 将存储仓库设置为网站类型
  • 将文件上传到仓库中
  • 设置权限和域名重定向(CNAME)

其他方面的内容

域名与备案

购买域名:

  • 国外注册商:狗爹地(坑钱网站)、NameCheap、NameSilo
  • 国内注册商:万网(阿里)、DNSPod(腾讯)

如果想在国内提供服务(服务器、托管、CDN等都算)必须要在国内注册商处购买,建议.com顶级域名,参考价格50元/年。

域名购买后还需要买至少三个月的服务器,然后进行域名备案。域名备案分为ISP备案和公安备案,具体参考各大网络服务提供商的帮助文档。ISP备案大约需要1-20天不等,公安备案约1天即可。

如果不想再国内提供服务(国外服务器或者国外托管),则不需要备案。

HTTPS + HSTS

2020年了,还有人不用HTTPS吗?(恁好,有的)

  • GitHub Pages用户:默认就已经强制HTTPS否则无法访问
  • 其他方式用户
    • 可以考虑通过ACME申请Let's Encrypt的免费证书,需要每三个月自己重新申请并更换一次
    • 也可以考虑用服务提供商签发的免费(赛门铁克?)证书,一年有效
    • 可以考虑使用Caddy Server等自动HTTPS的服务器(但不知道Caddy现在整天瞎搞什么)

启用HTTP严格安全传输:

  • 在HTTP响应头中加入HSTS参数,使浏览器强制进行HTTPS访问
  • (满足上一条后)加入HSTS Preload,硬编码进主流浏览器,强制进行HTTPS访问

内容分发网络(CDN)

CDN访问费用贼便宜,访问体验提升一大截。

推荐的CDN配置:

  • 全站所有内容通过CDN访问
  • 将图片、样式表等内容添加Referer限制(虽然只能简单的防止盗链)
  • 如果有自建HTTP服务器,可以考虑图片等资源带Token,彻底防止盗链
  • 每次更新网站后刷新CDN缓存(很重要)

为了确认CDN缓存是否为最新,我在每个页面底部都添加了Git提交信息,可供参考。

页面插件

推荐使用的页面插件(欢迎补充):

  • KaTeX或者MathJax(数学公式)
  • RemarkJS(幻灯片)

不推荐使用的页面插件:

  • 不走CDN的资源文件
    • 加载很慢。
    • 加载真的很慢。
    • 超时时间很长。
  • 加载动画/加载屏幕
    • 常常会因为某个脚本/字体没有加载出来导致页面不ready,什么都看不到
    • 网烂的时候真的就是内容已经收到却什么都不显示,还在加载没用的脚本文件
  • 看板娘/狗
    • 总共就那几个角色模型轮流转
    • 自己做一个的话还是挺不错的
  • 离开页面就把标题变成颜文字的神奇功能
    • 这有什么用???????
    • 点名批评出来挨打 magic tabs

评论系统

如果使用WordPress等,可以使用内置的评论插件,但是静态网站就只能外挂了。

名称 优点 缺点
Valine 配置简单 使用LeanCloud
LC要实名制认证
邮件通知经常抽风
Disqus 功能全套
配置简单
404
(其实404是优点)
Gitment 通过GitHub进行身份认证 需要每个页面一个issue

好了,以上就是自建博客的含义和出处。希望aunt精心整理的这篇内容能够解决你的困惑。(不管有没有解决你的困惑都请打钱GKD)