Hugo+云服务器搭建个人博客及配置

记录一些博客配置过程中的踩坑和经验，备忘

Please don’t hack me~ QwQ

初衷

• 好久就有搭博客的想法，但一直没有付诸实践，之前尝试过GitHub Pages，但是速度太慢；而且当时用Jekyll 时没太仔细搞，最后构建失败，css不起作用，就烂尾了

• 最近看了一篇讲为什么要写博客的文章，而且一直以来觉得有个服务器是个很帅的事情，于是“斥巨资”（￥90/年）买了个腾讯云服务器，在@zzsqwq 的熏陶下，利用Hugo搭了个简单的博客

• 在我看来，搭个人博客至少有几个好处

  1. 搭博客的好处，那篇文章中说得很有道理，当你坚持输出，坚持几个月，几年，一定会遇见不一样的自己，然后自己搭博客的话可能更爱写叭（至少我目前是，不知道是不是三分钟热度）

  2. 自己搭博客的好处，定制度高，在慢慢写文章的过程中会有很多需求，比如插入图片、目录、代码高亮、其它很多渲染等，对于不满意的部分可以自己替换修改，而且还能学到东西；

Step1. 服务器

• 买腾讯云服务器
• 买域名+域名实名备案【腾讯云备案—>工信部备案—>公安备案】（需要实名认证3天后才能提交备案，不然会被腾讯云驳回，因为工信部那边查不到你的信息），最后一步似乎不需要搞
• 然后就是启用宝塔面板，添加DNS解析+添加A记录，然后会自动给你生成一个主站（即访问你买的域名会重定向到的地方）
• 如何修改网站的主页面？
  • 我这里是用宝塔面板，所以只需要登录宝塔面板（如何登录？ssh到服务器用bt命令，选14，查看登录网址+账号密码，然后浏览器打开），然后点【添加网站】，修改mfqwq.cn这个根域名的网站根目录为想要的目录即可
  • 然后每次访问此域名，就会重定向到此目录下的index.html等（这个也可以在面板设置）文件

Step2. 博客

Hugo是真的快啊，名副其实，而且安装直接apt就行；中文文档 似乎更结构化一点，虽然没有完全翻译完毕，但看起来更舒服

基本操作

• 参考这篇文章

• 每次新建文章

  • hugo new post/xxx.md

• 主题选择

• 然后写了一个部署脚本，先构建，再利用rsync传送到服务器

  1 2	hugo; rsync -avuz --progress --delete public/ user@mfqwq.cn:.../mfqwq.cn

• 图片问题

  • 因为Hugo的工作根目录是static，而Typora读取图片的默认根目录是当前文件同级，所以导致图片没法在二者都正常显示，于是需要设置
  • 先修改Typora的图片读取根目录，点击【Format】—>【Image】—>【Use Image Root Path】，设置为博客网站的static目录，不过好像每次都得重新设置

  If you’re using markdown for building websites, you may specify a URL prefix for image preview on the local computer with property typora-root-url in the YAML Front Matter.

  For example, write typora-root-url:/User/Abner/Website/typora.io/ in YAML Front Matters, and then ![alt](/blog/img/test.png) will be treated as ![alt](file:///User/Abner/Website/typora.io/blog/img/test.png) in typora.

  In more recent versions of Typora, instead of manually typing typora-root-url property, you can just click item from the menu bar Format → Image → Use Image Root Path to tell Typora to generate typora-root-url property automatically.

  ——Typora官方文档

  • 然后修改Typora的图片默认插入目录，在static目录新建images文件夹，然后点击【File】—>【Preferences】修改图片插入路径为.../static/images即可

• 添加目录

  • 参考文章 ，或许应该了解一下Hugo的构建顺序，比如以哪些html为模板

• 去这里 学习网站建设相关知识

后期TODOs

• 添加评论功能

  • 使用Valine ，它是一个以LeanCloud 为后端的评论框架前端，LeanCloud是一款轻量级的（傻瓜式）后端平台，使用者无需关心其代码细节和与前端的交互，可以通过可视化的方法管理数据等，适合我这种小白。其它的如Gitalk可能要通过配置Github Action等方法实现。

• 添加内部搜索功能

  • 基于Lunr.js 或algolia
  • lunr: 简单, 无需同步 index.json, 没有 contentLength 的限制, 但占用带宽大且性能低 (特别是中文需要一个较大的分词依赖库)
  • algolia: 高性能并且占用带宽低, 但需要同步 index.json 且有 contentLength 的限制

• 添加访客统计功能

Hugo基本逻辑理解

• 内容都在content下修改，资源（css，js，图片）在static下，然后执行hugo构建后，部署都在public下
• 文章的url是base + 相对路径 + slug，资源的url是以static为根路径（如config中要设置js）
• 如果要修改网站模板怎么办？
  • html模板优先用根目录下的。所以一般的做法是从主题目录的layouts文件夹中复制出来对应的html模板到blog/layouts对应目录下，再修改这个副本，覆盖主题中的。
  • 一般config里会指定css/js加载顺序，只需在static里写一个自己的css，然后把顺序放到最后，覆盖原先的就行，我使用的LoveIt主题自己有一个_custom.css，直接在里面写就行。另外，当有同名的文件时，css/js配置是优先用主题中的，所以得叫不同名字。