5 分钟搭建一个简洁优雅的静态博客

2023-10-29

你可能会问,现在写作平台都这么多了,还有必要自己折腾博客么?

一开始我遇到这个问题,总觉得自己弄个博客,太麻烦了,也不一定坚持写下去,直接在平台上写得了。于是 CSDN、简书、知乎上开始写。

写着写着,我就发现他们有一些缺点。

为什么需要博客

CSDN 上的广告太多,简书虽然广告比较少,但是一旦出现公众号或一些涉及到 ID 推广的,直接就限制只有自己可见了,知乎更严格,最开始有几篇文章放了公众号的二维码,未及时修改,直接永久禁言了。看来这些内容平台都很害怕公众号,生怕公众号引流,凡涉及公众号引流的,都会被提示违规,公众号平台目前是我非常满意的,但是没有评论功能,一天只能发一篇,而且修改文章内容受到限制,只能改 20 个字。

在平台上写文章,就好像在别人家的地盘上耕种,总有一种受各种约束的感觉,于是我还是决定自己搞个博客。需求就是简洁、优雅、能评论、能检索、有标签。

一开始我找到了用 django 开发博客系统的开源项目,就在本地部署用了下,还不错,但是如果要真正用起来,还需要购买服务器,维护起来有一定的成本,于是就放弃了动态博客,转而尝试着静态博客,先试了下 hexo,虽然也还行,但是我就是觉得不太美观,然后尝试了 VuePress,最终对 VuePress 的简约风格特别满意,目前我的博客「somenzz.github.io」使用的就是基于 VuePress 一款主题:vuepress-theme-reco。可以先瞄一下:

首页
文章
评论
标签

很多样式是可以自定义的,比如说这个博客:

如果你心动了,想建一个属于自己的静态博客,那么请跟着我继续向下看吧,非常简单易上手。

前提条件

1、你需要会使用 Git 和 GitHub 的基本功能,比如拉取,提交,推送,创建分支,如果不会,请去这个网站[1]学习。

2、你的电脑已经安装 Node.js,还没有安装的,请去官网[2]安装。

直接使用

主题 vuepress-theme-reco 也提供了快速生成博客的模版,但是没有配置评论、阅读量、SEO 等设置,我这里直接全部配置好,你直接从我的仓库 fork,然后 clone 代码到本地,替换一些配置文件的文本内容,还有自己的一些图片,就可以快速生成属于自己的静态博客。

基于这个仓库进行 https://github.com/somenzz/blog-template.git[3]

以下是操作步骤,非常简单。

  1. 克隆仓库到本地。

git clone https://github.com/somenzz/blog-template.git
  1. 运行看效果,修改成自己满意的配置。

cd blog-template
npm install && npm run dev

配置文件位于为 docs/.vuepress,请逐行检查,把博客名称,描述,图片位置,颜色配置等,改成自己满意的的即可。

评论取的 appId、appKey 见 docs/.vuepress/config/theme/index.js 文件,请先去 valine[4],申请自己的 appId 及 appKey。

  1. 写博客。

cd blog-template
vi docs/blog/2021/blog.md
npm run build #生成静态文件,一般在 public 目录下,该目录可以部署到服务器,使用 nginx 驱动
  1. 提交到自己的 xxx.github.io 仓库。

先在 github 上创建一个 xxx.github.io 仓库

cd blog-template/public
git init
git add .
git commit -m "add article"
git push --force https://github.com/xxx/xxx.github.io.git master #可以强制提交,这个仓库仅保留静态文件

push 之后去 xxx.github.io 仓库的设置页面,设置 githup pages 指定 master 分支的 root 路径即可。

看到一些人会使用同一个仓库设置两个分支,比如说 master 用于写博客,gh-pages 用于保存静态资源。

我反对这种做法,因为这违背了 github 分支的用途,一般 master 分支不够用的时候,我们创建 develop 分支,用于开发时,修改任何代码不会影响 master 分支,开发、测试完成,形成稳定版本,再将 develop 分支合并到 master 分支,其实 master 和 develop 就是同一个仓库的两个指针,指向不同的时间点,所谓的合并就是将 master 的指针指向 develop 的位置。

而本应用中 master 存放些博客的脚手架,如 md 文件,VuePress 等配置信息,gh-pages 只存放静态文件,两个仓库的文件没有任何共同之处,应该使用两个仓库,而不是两个分支。而且就算用,这两个分支也永远没有合并的可能,何况这样做相当麻烦,每次提交到 gh-pages 你都需要先切换到 gh-pages 分支,然后将 master 分支下的 .git文件夹先移走,提交完在移动回来。

博客生成的 public 目录,也可以再部署到 gitee pages,或自己的服务器,也可以同时部署。

  1. 访问自己的博客,比如 https://somenzz.github.io

  2. 如果需要提交 GitHub 后自动部署,请参考我的文章 GitHub Actions入门教程:自动化部署静态博客

最后

静态博客部署是 0 成本,高效率,无需担心网络安全等问题,值得每一个写作者尝试,省下的精力可以专心写作,此外,你也可以申请一个个性的域名直接指向 xxx.github.io 这个网站,比如我的 https://somenzz.cn 。

如果觉得本文不错,欢迎关注我的公众号「Python七号」,有任何问题,都可以公众号聊天界面直接咨询哦,我会第一时间回复。

参考资料

[1] 

网站: https://www.liaoxuefeng.com/wiki/896043488029600

[2] 

官网: https://nodejs.org/en/

[3] 

https://github.com/somenzz/blog-template.git: https://github.com/somenzz/blog-template.git

[4] 

valine: https://valine.js.org/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

5 分钟搭建一个简洁优雅的静态博客 的相关文章

  • 用于渲染 html 子集的 Django templatetag

    我有一些 html 在本例中是通过 TinyMCE 创建的 我想将其添加到页面中 但是 出于安全原因 我不想只打印用户输入的所有内容 有谁知道模板标签 最好是过滤器 只允许呈现 html 的安全子集 我意识到 Markdown 和其他人就是
  • HDFS:使用 Java / Scala API 移动多个文件

    我需要使用 Java Scala 程序移动 HDFS 中对应于给定正则表达式的多个文件 例如 我必须移动所有名称为 xml从文件夹a到文件夹b 使用 shell 命令我可以使用以下命令 bin hdfs dfs mv a xml b 我可以
  • 可以使用带有 HTML5 播放器的 Amazon S3/CloudFront 流式传输视频吗?

    我想使用 HTML5 视频播放器并流式传输视频 S3 CloudFront 可以实现这一点吗 我了解 Amazon 使用 RTMP 流媒体协议和 HTML5video标签不支持 RTMP 有没有办法用 HTML5 播放器播放视频 Wayne
  • 如何为 Gson 编写自定义 JSON 反序列化器?

    我有一个 Java 类 用户 public class User int id String name Timestamp updateDate 我收到一个包含来自 Web 服务的用户对象的 JSON 列表 id 1 name Jonas
  • 使用 :hover 作为元素的内联样式(使用 HTML/CSS/php)[重复]

    这个问题在这里已经有答案了 可能的重复 如何将 a hover 规则嵌入到文档中间的样式属性中 https stackoverflow com questions 131653 how do i embed an ahover rule i
  • hibernate总是自己删除表中的所有数据

    您好 我正在开发一个 spring mvc 应用程序 它使用 hibernate 连接到存储文件的 mysql 数据库 我有两个方法 一个方法添加我选择的特定文件路径中的所有文件 另一种方法调用查询以返回从 mysql 存储的文件列表 问题
  • 如何将文件透明地传输到浏览器?

    受控环境 IE8 IIS 7 ColdFusion 当从 IE 发出指向媒体文件 例如 mp3 mpeg 等 的 GET 请求时 浏览器将启动关联的应用程序 Window Media Player 我猜测 IIS 提供文件的方式允许应用程序
  • 制作java包

    我的 Java 类组织变得有点混乱 所以我要回顾一下我在 Java 学习中跳过的东西 类路径 我无法安静地将心爱的类编译到我为它们创建的包中 这是我的文件夹层次结构 com david Greet java greeter SayHello
  • 使当前提交成为 Git 存储库中唯一(初始)提交?

    我目前有一个本地 Git 存储库 我将其推送到 Github 存储库 本地存储库有约 10 次提交 Github 存储库是其同步副本 我想要做的是从本地 Git 存储库中删除所有版本历史记录 以便存储库的当前内容显示为唯一提交 因此存储库中
  • 使用 Flyway 和 Hibernate 的 hbm2ddl 在应用程序的生命周期中管理数据库模式

    我正在开发 Spring Hibernate MySql 应用程序 该应用程序尚未投入生产 我目前使用 Hibernatehbm2ddl该功能对于管理域上的更改非常方便 我也打算用Flyway用于数据库迁移 在未来的某个时候 该应用程序将首
  • 将 JSON 参数从 java 发布到 sinatra 服务

    我有一个 Android 应用程序发布到我的 sinatra 服务 早些时候 我无法读取 sinatra 服务上的参数 但是 在我将内容类型设置为 x www form urlencoded 之后 我能够看到参数 但不完全是我想要的 我在
  • Git 更改丢失 - 为什么?

    我们的开发团队正在使用 git 最近我们至少两次丢失了文件更改 我们正在使用私人 Github 存储库 在当前情况下 我们可以返回 Github 上的日志并查看我对文件所做的一些更新 后来 另一位团队成员更改了文件的不同部分 它似乎破坏了我
  • Springs 元素“beans”不能具有字符 [children],因为该类型的内容类型是仅元素

    我在 stackoverflow 中搜索了一些页面来解决这个问题 确实遵循了一些正确的答案 但不起作用 我是春天的新人 对不起 这是我的调度程序 servlet
  • 将 JTextArea 内容写入文件

    我在 Java Swing 中有一个 JTextArea 和一个 提交 按钮 需要将textarea的内容写入一个带有换行符的文件中 我得到的输出是这样的 它被写为文件中的一个字符串 try BufferedWriter fileOut n
  • 将2-3-4树转换为红黑树

    我正在尝试将 2 3 4 树转换为 java 中的红黑树 但我无法弄清楚它 我将这两个基本类编写如下 以使问题简单明了 但不知道从这里到哪里去 public class TwoThreeFour
  • 弹出窗口的动态高度取决于内容,可能吗?

    是否有可能获得一个宽度始终为 400px 的弹出窗口 但根据弹出窗口中的内容动态高度 我已经看到了这个 但不知道如何将其应用到弹出窗口 调整 iframe 的宽度高度以适应其中的内容 https stackoverflow com ques
  • AngularJS 在指令运行之前通过 AJAX 检索数据

    我正在使用 AngularUIuiMap http angular ui github com directives map实例化谷歌地图的指令 uiMap 指令非常适合处理硬编码数据 mapOptions and myMarkers 但是
  • KeyPressed 和 KeyTyped 混淆[重复]

    这个问题在这里已经有答案了 我搜索过之间的区别KeyPressedand KeyTyped事件 但我仍然不清楚 我发现的一件事是 Keypressed 比 KeyTyped 首先被触发 请澄清一下这些事件何时被准确触发 哪个适合用于哪个目的
  • java8 Collectors.toMap() 限制?

    我正在尝试使用java8Collectors toMap on a Stream of ZipEntry 这可能不是最好的想法 因为在处理过程中可能会发生异常 但我想这应该是可能的 我现在收到一个我不明白的编译错误 我猜是类型推理引擎 这是
  • Swagger/Openapi-Annotations:如何使用 $ref 生成 allOf?

    我正在生成 Rest 端点 包括添加OpenAPI Swagger对生成的代码进行注释 虽然它对于基本类型运行得很好 但我在自定义类方面遇到了一些问题 现在我有很多自定义类的重复架构条目 使用 Schema 实现 MyClass class

随机推荐

  • PHPBONE使用问题集--.Net直接POST数据被过滤

    当 NET用POST发送数据到服务端时 发现 加号全被过滤成空格了 以为是PHPBONE的问题 查了半天代码也没发现哪有异常 但是以前也遇到过 也的确是处理过 只是不记得是怎么处理的了 无耐翻出以前的程序查找了一番 结果发现是编码问题 把数
  • 2021-07-18

    JQuery之DOM操作 1 创建节点及结点属性 1 DOM创建节点及结点属性 创建流程比较简单 大体如下 创建节点 常见的 元素 属性和文本 添加节点的一些属性 加入到文档中 流程中涉及的一点方法 创建元素 document create
  • 哲学家问题(死锁问题)

    1 问题描述 有五个哲学家绕着圆桌坐 每个哲学家面前有一盘面 两人之间有一支筷子 这样每个哲学家左右各有一支筷子 哲学家有2个状态 思考或者拿起筷子吃饭 如果哲学家拿到一只筷子 不能吃饭 直到拿到2只才能吃饭 并且一次只能拿起身边的一支筷子
  • git从某个分支创建新分支

    如题 记录一下从某个分支创建新分支的方法 如从dev分支创建一个test分支 第一步 切换到你指定的分支 如我要从dev上拉一个分支 代码一模一样 git checkout dev 第二步 拉取dev的最新代码 git pull 第三步 在
  • Android Bitmap加载内存占用彻底分析

    背景 在某个版本应用上线后 偶然测得首页占用的内存非常的大而且一直不能回收掉 经过一轮的排查后最终确定是3张图片引起的 当时每张图片占用了将近20m内存 当时紧急处理好后还一直惦记着此事 后来对Android加载Bitmap的内存占用作了彻
  • Android系统源代码的下载与编译

    http www jianshu com p aeaceda41798
  • UVa 12955 Factorial

    Problem uva onlinejudge org index php option com onlinejudge Itemid 8 page show problem problem 4834 开始想多了 想着不能简单贪心 要用dp
  • C# Task异步编程

    Task任务用法 Task用的是线程池 线程池的线程数量的有上限的 这个可以通过ThreadPool修改 我们经常会用到task run new task 和task factory startnew方法来创建任务 Task Factory
  • 检查HDFS块状态

    hadoop集群运行过程中 节点的块状态或者上下线节点时集群都会受影响 如何查看当前的hdfs的块的状态 hadoop1 x时候的命令 hadoop2 x也可使用 hadoop fsck 在hadoop2 0之后 可以使用新命令 hdfs
  • 关于 JavaScript 中的 Promises

    在 JavaScript 中 Promise 是一个对象 它表示一个可能还不可用 但会在未来解决的值 Promises 用于处理异步操作 例如发出网络请求或访问数据库 其中结果不是立即可用的 如果你准备好了 我想开始我们的冒险 承诺如何运作
  • vc2010中开始执行不调试灰的_Intellij IDEA调试功能使用总结

    这段时间一直在使用Intellij IDEA 今天把调试区工具的使用方法记录于此 先编译好要调试的程序 1 设置断点 选定要设置断点的代码行 在行号的区域后面单击鼠标左键即可 2 开启调试会话 点击红色箭头指向的小虫子 开始进入调试 IDE
  • 快速傅里叶变换(FFT)

    前言 在学习FFT过程中看了很多博客 但发现在看博客的时候博客上的内容大多都晦涩难懂 于是乎想自己写一篇博客来记录一下自己学习的心得体会 知其源 先来讲讲FFT的起源 快速傅里叶变换是1965年由J W 库利和T W 图基提出的 采用这种算
  • 微服务项目之JVM Thread线程数飙升

    查找步骤如下 1 找到使用的jdk 在下面找到bin目录 之后双击bin目录下jvisualvm exe 2 启动本地项目 按照上图就可以监控线程数变化 如果项目部署在远程服务器上 那么则需要添加远程监控 选中远程 gt 右键添加远程主机
  • 目标检测跟踪算法--传统方法

    第一阶段 目标跟踪分为两个部分 一个是对指定目标寻找可以跟踪的特征 常用的有颜色 轮廓 特征点 轨迹等 另一个是对目标特征进行跟踪 1 静态背景 1 背景差 对背景的光照变化 噪声干扰以及周期性运动等进行建模 通过当前帧减去背景图来捕获运动
  • python使用hash256加密验证字符串

    这篇博客使用hash256加密一个固定的字符串 同一个字符串有固定的hash256 因此可以通过验证hash值 判断字符串是否发生变化 import hashlib def get hash256 data str 对data加密 hash
  • USB audio调试

    androidstudio打印的信息有如下 07 12 08 27 17 660 2284 2284 I AudioFlinger loadHwModule Loaded a2dp audio interface from A2DP Aud
  • Linux Foundation发布面向IoT的实时OS开发项目「Zephyr」

    本文翻译至 http japan zdnet com article 35078243 物联网 IoT 领域新的玩家出场了 这就是Linux Foundation的 Zephyr Project 本文考察该项目给开发者和消费者双方带来利益的
  • ObjectArx 自定义实体

    1 arx文档中规定的必须重写的几个函数 AcDbObject virtual Acad ErrorStatus dwgInFields AcDbDwgFiler filer virtual Acad ErrorStatus dwgOutF
  • 对数器(一种测试算法的技巧)

    当我们有两个算法 一个是暴力算法 一个是好的算法 我们想看是否这个好的算法存在有问题 因为暴力算法一般比较好写并且不会出错 但是会超时 当然暴力也可能错 我们就用一个随机样本产生器 生成数据分别用这两个算法跑 是否结果完全一样 不一样说明其
  • 5 分钟搭建一个简洁优雅的静态博客

    你可能会问 现在写作平台都这么多了 还有必要自己折腾博客么 一开始我遇到这个问题 总觉得自己弄个博客 太麻烦了 也不一定坚持写下去 直接在平台上写得了 于是 CSDN 简书 知乎上开始写 写着写着 我就发现他们有一些缺点 为什么需要博客 C