搭建博客的最佳实践 - 🎯转了码的刘公子

![Picture4.png|400](https://imagehosting4picgo.oss-cn-beijing.aliyuncs.com/imagehosting/Picture4.png?x-oss-process=image/resize,l_400) 搭建博客的第一性原理是，快速构建一个符合自己审美的，带着常见博客功能的网站，放置自己的文字，促进自己的写作，培养互联网声望。  ## [](https://liugongzi.org/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/#%E7%9B%AE%E5%BD%95 "目录") 目录 - [以终为始，找到有结果的人！](https://liugongzi.org/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/#%E4%BB%A5%E7%BB%88%E4%B8%BA%E5%A7%8B%EF%BC%8C%E6%89%BE%E5%88%B0%E6%9C%89%E7%BB%93%E6%9E%9C%E7%9A%84%E4%BA%BA%EF%BC%81) - [为什么](https://liugongzi.org/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/#%E4%B8%BA%E4%BB%80%E4%B9%88) - [脚手架 hexo](https://liugongzi.org/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/#%E8%84%9A%E6%89%8B%E6%9E%B6%20hexo) - [本地 obsidian](https://liugongzi.org/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/#%E6%9C%AC%E5%9C%B0%20obsidian) - [域名和服务器](https://liugongzi.org/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/#%E5%9F%9F%E5%90%8D%E5%92%8C%E6%9C%8D%E5%8A%A1%E5%99%A8) - [插入视频](https://liugongzi.org/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/#%E6%8F%92%E5%85%A5%E8%A7%86%E9%A2%91) - [字数统计与阅读时长](https://liugongzi.org/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/#%E5%AD%97%E6%95%B0%E7%BB%9F%E8%AE%A1%E4%B8%8E%E9%98%85%E8%AF%BB%E6%97%B6%E9%95%BF) - [评论系统](https://liugongzi.org/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/#%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9F) - [模版设置](https://liugongzi.org/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/#%E6%A8%A1%E7%89%88%E8%AE%BE%E7%BD%AE) - [图片](https://liugongzi.org/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/#%E5%9B%BE%E7%89%87) - [定时任务](https://liugongzi.org/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/#%E5%AE%9A%E6%97%B6%E4%BB%BB%E5%8A%A1) - [参考资料：](https://liugongzi.org/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/#%E5%8F%82%E8%80%83%E8%B5%84%E6%96%99%EF%BC%9A) ## [](https://liugongzi.org/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/#1-%E4%B8%8D%E5%90%8C%E5%8D%9A%E5%AE%A2%E7%B1%BB%E5%9E%8B%E7%9A%84%E9%80%89%E6%8B%A9 "1. 不同博客类型的选择")1. 不同博客类型的选择目前搭建个人网站主要有两种选择： - 动态网站：通常包括前端和后端两个部分，是通过数据库进行架构的网站，用户访问时网站会从数据库中提取信息并实时变更网站内容。这种网站通常利于维护、可交互性强，功能相对强大，但网站本身更加臃肿，用户访问时网页的打开速度也较慢。主流的动态博客框架有 Wordpress、Typecho 等。 - 静态网站：指全部通过 html 代码格式页面组成、所有内容都保存在 html 页面中的网站。可维护性较差，修改网页内容需要重新生存 html 页面，但访问速度极快、简洁、轻量。主流静态博客框架有 Hexo、Hugo 等。 ## [](https://liugongzi.org/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/#%E4%BB%A5%E7%BB%88%E4%B8%BA%E5%A7%8B%EF%BC%8C%E6%89%BE%E5%88%B0%E6%9C%89%E7%BB%93%E6%9E%9C%E7%9A%84%E4%BA%BA%EF%BC%81 "以终为始，找到有结果的人！") 以终为始，找到有结果的人 - 先完成再完美，践行 " 最小可行性产品 " - 与人的链接可能是最直接的完成方式 ### [](https://liugongzi.org/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/#%E4%B8%BA%E4%BB%80%E4%B9%88 "为什么") 为什么将公司向的东西和个人向的东西分开，避免自己与某一份具体工作的深度耦合。 ### [](https://liugongzi.org/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/#%E8%84%9A%E6%89%8B%E6%9E%B6-hexo "脚手架 hexo") 脚手架 hexo hexo 的 next 系列里的 mist 是我目前见到的博客里看着最舒服的 ### [](https://liugongzi.org/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/#%E6%9C%AC%E5%9C%B0-obsidian "本地 obsidian") 本地 obsidian 丰富的插件 ### [](https://liugongzi.org/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/#%E5%9F%9F%E5%90%8D%E5%92%8C%E6%9C%8D%E5%8A%A1%E5%99%A8 "域名和服务器") 域名和服务器域名可以去 CloudFare 买服务器的话用 AWS Lightsail，另外本地 terminal 工具我推荐一下 warp，蛮不错的搭好以后服务器上搞一个 git hook，部署起来很方便 ### [](https://liugongzi.org/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/#%E7%BD%91%E7%AB%99-logo "网站 logo") 网站 logo 在这里做好 [LLFavicon.ico图标生成器 | 一键免费制作ico图标 - 标小智 (logosc.cn)](https://www.logosc.cn/logo/favicon?s=LL)，然后去配置文件里配置一下即可 ### 文中插入视频音频视频嵌入有时候和老外聊完天，发了 B 站视频的同时，想写一些 comment，所以有这个诉求 1. 首先复制用于分享的 `嵌入代码` 2. 然后按照 markdown 格式嵌入 HTML 标签即可，设置成圆角更好看一些 ```html <iframe src="https://imagehosting4picgo.oss-cn-beijing.aliyuncs.com/imagehosting/477_1712389648.mp4" allowfullscreen="true" style="border-radius: 30px; overflow: hidden; border: 3px solid #ccc; width: 360px; height: 640px; display: block; margin: 20px auto; aspect-ratio: 9 / 16;" frameborder="0"></iframe> ``` 音频嵌入 ```html <div style="max-width: 600px; margin: 20px auto; text-align: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); border-radius: 10px; padding: 20px;"> <p style="font-weight: bold; font-size: 36px;">When You Are Old</p> <p>by W.B. Yeats</p> <p>Narrated by Luis Leonard</p> <audio controls style="width: 100%; margin-top: 20px; border-radius: 10px;"> <source src="https://imagehosting4picgo.oss-cn-beijing.aliyuncs.com/imagehosting/fix-dir%2Fliuyishou%2Ftmp%2F2024%2F04%2F08%2F00-28-48-8072eeb92a65a9f8cf66e809f5d4ee77-When%20you%20are%20old%20and-c561ce.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </div> ``` [hexo博客网页嵌入bilibili视频（免插件） | 峡州仙士之页 (cjh0613.com)](https://cjh0613.com/20200405hexo-bilibili) ### [](https://liugongzi.org/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/#%E5%AD%97%E6%95%B0%E7%BB%9F%E8%AE%A1%E4%B8%8E%E9%98%85%E8%AF%BB%E6%97%B6%E9%95%BF "字数统计与阅读时长") 字数统计与阅读时长 ![image.png|400](https://imagehosting4picgo.oss-cn-beijing.aliyuncs.com/imagehosting/20240330224535.png) [字数统计 - Hexo-NexT](https://hexo-next.readthedocs.io/zh-cn/latest/next/advanced/%E5%AD%97%E6%95%B0%E7%BB%9F%E8%AE%A1/) ### [](https://liugongzi.org/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/#%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9F "评论系统") 评论系统用 valine 就挺不错的 [使用Valine为你的Hexo个人博客添加评论功能 | LorrBlog (lorrlai.github.io)](https://lorrlai.github.io/2021/12/18/20211217-ping-lun-gong-neng-tian-jia/) ### [](https://liugongzi.org/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/#%E6%A8%A1%E7%89%88%E8%AE%BE%E7%BD%AE "模版设置") 模版设置 | | |---| |--- <br>title: 博客搭建 <br>date: <% tp.date.now("YYYY-MM-DD") %> <br>updated: 2024-04-07 <br>categories: 文以载道 <br>tags: <%* <br>const folders = tp.file.folder(true).split("/").filter(n => n); // Excludes the top-level directory to align with your request <br>tR += folders.join(", "); <br>%> <br>--- <br> <br>excerpt <br> <br>| 利用 obsidian 的 templater 插件，实现每新建一个文件能自动出现博客展示需要的 properties，以及用于折叠全文需要的综述区域 ### 封面图片每篇文章可以选一个代表性的图片作为封面，有两点处理技巧： 1. [PNG图片免费下载_PNG素材_觅元素 (51yuansu.com)](https://www.51yuansu.com/all/) 中搜索透明背景的图片，某鱼有无限制账号哦！ 2. WPS 为图片添加轮廓阴影 3. 上传到阿里云 OOS 图床，并用?x-oss-process=image/resize,l_300 的 url 后缀处理图片大小，避免图名重复，可以用 picgo 的 rename-file 1.0.4 插件 ### 视频音频 ### [](https://liugongzi.org/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/#%E5%AE%9A%E6%97%B6%E4%BB%BB%E5%8A%A1 "定时任务") 定时任务目的是为了解放 publish 这一步，通过在 mac 上设定定时任务，实现无感知的自动将本地博客内容同步到服务器使用 `launchd`，你需要创建一个 `.plist` 文件来定义你的任务。以下是创建一个 `launchd` 任务的步骤： 1. 创建一个名为 `com.user.hexoblogupdate.plist` 的文件，并保存到 `~/Library/LaunchAgents/` 文件夹。 2. 将以下内容复制到你的 `.plist` 文件中，这将设置任务在每天的 12 点和 0 点执行你的命令： 3. 保存 ```html <div style="max-width: 600px; margin: 20px auto; text-align: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); border-radius: 10px; padding: 20px;"> <p style="font-weight: bold; font-size: 36px;">When You Are Old</p> <p>by W.B. Yeats</p> <p>Narrated by Luis Leonard</p> <audio controls style="width: 100%; margin-top: 20px; border-radius: 10px;"> <source src="https://imagehosting4picgo.oss-cn-beijing.aliyuncs.com/imagehosting/fix-dir%2Fliuyishou%2Ftmp%2F2024%2F04%2F08%2F00-28-48-8072eeb92a65a9f8cf66e809f5d4ee77-When%20you%20are%20old%20and-c561ce.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </div> ```0 文件。 1. 运行以下命令来加载你的 ```html <div style="max-width: 600px; margin: 20px auto; text-align: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); border-radius: 10px; padding: 20px;"> <p style="font-weight: bold; font-size: 36px;">When You Are Old</p> <p>by W.B. Yeats</p> <p>Narrated by Luis Leonard</p> <audio controls style="width: 100%; margin-top: 20px; border-radius: 10px;"> <source src="https://imagehosting4picgo.oss-cn-beijing.aliyuncs.com/imagehosting/fix-dir%2Fliuyishou%2Ftmp%2F2024%2F04%2F08%2F00-28-48-8072eeb92a65a9f8cf66e809f5d4ee77-When%20you%20are%20old%20and-c561ce.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </div> ```1 任务： ```html <div style="max-width: 600px; margin: 20px auto; text-align: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); border-radius: 10px; padding: 20px;"> <p style="font-weight: bold; font-size: 36px;">When You Are Old</p> <p>by W.B. Yeats</p> <p>Narrated by Luis Leonard</p> <audio controls style="width: 100%; margin-top: 20px; border-radius: 10px;"> <source src="https://imagehosting4picgo.oss-cn-beijing.aliyuncs.com/imagehosting/fix-dir%2Fliuyishou%2Ftmp%2F2024%2F04%2F08%2F00-28-48-8072eeb92a65a9f8cf66e809f5d4ee77-When%20you%20are%20old%20and-c561ce.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </div> ```2 1. 如果需要卸载此任务，可以使用以下命令： ```html <div style="max-width: 600px; margin: 20px auto; text-align: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); border-radius: 10px; padding: 20px;"> <p style="font-weight: bold; font-size: 36px;">When You Are Old</p> <p>by W.B. Yeats</p> <p>Narrated by Luis Leonard</p> <audio controls style="width: 100%; margin-top: 20px; border-radius: 10px;"> <source src="https://imagehosting4picgo.oss-cn-beijing.aliyuncs.com/imagehosting/fix-dir%2Fliuyishou%2Ftmp%2F2024%2F04%2F08%2F00-28-48-8072eeb92a65a9f8cf66e809f5d4ee77-When%20you%20are%20old%20and-c561ce.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </div> ```3 #### 自动更新 properties 的脚本 ```python import os import re from datetime import datetime # 路径设置为你的 Markdown 文件所在的目录，这里是 _posts 的父目录 markdown_path = r'/Users/liuyishou/Library/Mobile Documents/com~apple~CloudDocs/blog/source' # 遍历指定目录下的所有 Markdown 文件 for root, dirs, files in os.walk(os.path.join(markdown_path, '_posts')): for file in files: # 将文件名转换为小写并检查是否以 '.md' 结尾且不是指定的排除文件 if file.lower().endswith('.md') and file.lower() != 'template for blog.md': filepath = os.path.join(root, file) # 获取文件的最后修改时间 mtime = os.path.getmtime(filepath) modified_datetime = datetime.fromtimestamp(mtime) # 解析 categories 和 tags path_parts = root.split(os.sep) posts_index = path_parts.index('_posts') category = path_parts[posts_index + 1] if posts_index + 1 < len(path_parts) else 'Uncategorized' tags = path_parts[posts_index + 1:] if posts_index + 1 < len(path_parts) else [] with open(filepath, 'r+', encoding='utf-8') as f: content = f.read() # 检查是否存在 Front Matter front_matter_match = re.search(r'^---\s+(.*?)\s+---', content, re.DOTALL) if front_matter_match: # 获取现有的 Front Matter front_matter_block = front_matter_match.group(1) # 如果 date 字段不存在，则使用 updated 的值作为 date 的值 if not re.search(r'^date:', front_matter_block, flags=re.MULTILINE): updated_date = f'date: {modified_datetime.strftime("%Y-%m-%d")}\n' front_matter_block = updated_date + front_matter_block # 更新或添加必要的字段 updated_front_matter = re.sub(r'^title:.*', f'title: {file[:-3]}', front_matter_block, flags=re.MULTILINE) updated_front_matter = re.sub(r'^updated:.*', f'updated: {modified_datetime.strftime("%Y-%m-%d")}', updated_front_matter, flags=re.MULTILINE) updated_front_matter = re.sub(r'^categories:.*', f'categories: {category}', updated_front_matter, flags=re.MULTILINE) # 处理 tags tags_block = '\n'.join([f' - {tag}' for tag in tags]) if 'tags:' in updated_front_matter: updated_front_matter = re.sub(r'^tags:.*(?:\n - .*)*', f'tags:\n{tags_block}', updated_front_matter, flags=re.MULTILINE) else: updated_front_matter += f'\ntags:\n{tags_block}' # 替换整个 Front Matter 区块 content = re.sub(r'^---\s+.*?\s+---', f'---\n{updated_front_matter}\n---', content, flags=re.DOTALL) else: # 创建新的 Front Matter new_front_matter = f'---\ntitle: {file[:-3]}\nupdated: {modified_datetime.strftime("%Y-%m-%d")}\ncategories: {category}\ntags:\n' + '\n'.join( [f' - {tag}' for tag in tags]) + '\n---\n' content = new_front_matter + content # 重写文件 f.seek(0) f.write(content) f.truncate() ``` ### [](https://liugongzi.org/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/#%E5%8F%82%E8%80%83%E8%B5%84%E6%96%99%EF%BC%9A "参考资料：") 参考资料 [庭说 - 保持蓬勃的好奇心 (tingtalk.me)](https://tingtalk.me/) [基于Hexo的静态博客网站搭建并部署至云服务器 | Glimound的个人技术经验分享](https://www.glimound.com/build-hexo-blog/) [基于Hexo的静态博客网站搭建并部署至云服务器 | Glimound的个人技术经验分享](https://www.glimound.com/build-hexo-blog/) [hexo设置网站的图标Favicon - 简书 (jianshu.com)](https://www.jianshu.com/p/82c1d33420ba)