博客搭建详解教程
(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 }}
判断条件- 可以使用
gt
、ge
、lt
、le
、eq
、ne
进行比较 - 可以使用
not
、or
和and
进行逻辑运算
- 可以使用
{{ 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/
文件夹下即可。例如
 --> /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,什么都看不到
- 网烂的时候真的就是内容已经收到却什么都不显示,还在加载没用的脚本文件
- 看板娘/狗
- 总共就那几个角色模型轮流转
- 自己做一个的话还是挺不错的
- 离开页面就把标题变成颜文字的神奇功能
评论系统
如果使用WordPress等,可以使用内置的评论插件,但是静态网站就只能外挂了。
名称 | 优点 | 缺点 |
---|---|---|
Valine | 配置简单 | 使用LeanCloud LC要实名制认证 邮件通知经常抽风 |
Disqus | 功能全套 配置简单 |
404 (其实404是优点) |
Gitment | 通过GitHub进行身份认证 | 需要每个页面一个issue |
好了,以上就是自建博客的含义和出处。希望aunt精心整理的这篇内容能够解决你的困惑。(不管有没有解决你的困惑都请打钱GKD)