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

AI权益加码!Claude Code、Cursor等20+工具免费用! 购周边限时加赠Coding Plan Lite,畅享主流AI工具!学习进阶更高效! 阅读详情

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

一开始我遇到这个问题,总觉得自己弄个博客,太麻烦了,也不一定坚持写下去,直接在平台上写得了。于是 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/

静态/动态博客Blog框架简介 简言之,Blog就是以网络作为载体,简易迅速便捷地发布自己的心得,及时有效轻松地与他人进行交流,再集丰富多彩的个性化展示于一体的综合性平台。 ⛄博客搭建的方式 总体来说,Blog搭建的方式可以分为静态博客和动态博客。顾名思义,静态博客:博文内容是通过文档(如:.md文件等)记录的(一个独立的文件),通过生成工具编译成最终的hml、css、js等静态文件,然后部署在静态Server服务器上或Web托管至数据仓库(如:Github),即可在互联网中被访问,不需要数据库的支撑。动态博客:是以数据库技术为基础,其博 阅读详情

相关推荐

使用 Hexo 搭建静态博客

文章目录Hexo 简介什么是 Hexo?Hexo 安装Hexo 建站Hexo 配置Hexo 自定义主题Hexo 写作Hexo 服务器Hexo 生成与发布一键部署 Hexo 站点到 github pagesGithub 仓库准备安装 hexo-deployer-git 插件修改 _config.yml 配置部署站点一键部署到自己的云服务器配置 Nginx 反向代理新建 git 仓库,并配置 git hooks发布服务到 git 仓库 Hexo 简介 什么是 Hexo? Hexo 是一个快速、简洁且高效的博客

I'm cunfu 762

个人免费静态博客网站搭建步骤记录——Git+hexo

静态网站是指全部由HTML(标准通用标记语言的子集)代码格式页面组成的网站,所有的内容包含在网页文件中。网页上也可以出现各种视觉动态效果,如GIF动画、FLASH动画、滚动字幕等,而网站主要是静态化的页面和代码组成,一般文件名均以htm、html、shtml等为后缀。简单来说,与动态网页相比,静态网站的网页全由固定的html写成,内容稳定固定,没有接口与时间限制,如果网站创建者不进行修改,静态网页的内容与网址一般不会发生改变。

weixin_43750300的博客 2371

博客系统 -- 静态页面

本文主要内容 : 实现一个 博客系统的静态页面 , 加深 html , css ,javaScript 的 印象

mu_tong_的博客 4279

搭建个人静态blog

搭建个人blog

xccevol的博客 1295

5分钟上手Hexo主题Solitude:打造优雅简约的个人博客空间

还在为博客主题选择而烦恼吗?Hexo主题Solitude正是你需要的解决方案!这款响应式设计的主题以极简风格著称,专注于内容呈现,让读者沉浸在纯粹的阅读体验中。无论你是博客新手还是技术达人,Solitude都能帮你快速搭建专业级的个人博客。 ## 🚀 一键安装:快速开始使用Solitude 安装Solitude主题非常简单,只需几个步骤: 1. 在Hexo博客根目录下执行: ```bash

gitblog_00083的博客 833

5分钟搭建私人Java博客系统——Tale

本文适合刚学习完 Java 语言基础的人群,跟着本文可了解和运行 Tale 项目。示例均在 Windows 操作系统下演示 本文作者:HelloGitHub-秦人 HelloGitHub 推出的《讲解开源项目》[1]系列,今天给大家带来一款基于 Java 语言的轻量级博客开源项目——Tale 它拥有小、美、快、稳的特点。该项目完全开源、免费,能够让你快速搭建包含前、后台的博客系...

HelloGitHub 的博客 1130

如何5分钟快速搭建hexo-theme-apollo主题博客

hexo-theme-apollo是一款简洁优雅的Hexo主题,能帮助你快速搭建专业美观的博客网站。本教程将带你通过简单几步,在5分钟内完成主题的安装与基础配置,让你的个人博客立即拥有现代化的界面和流畅的阅读体验。 ## 准备工作:环境安装 在开始前,请确保你的电脑已安装以下工具: - Node.js(推荐v14+版本) - Git 如果尚未安装,可以访问Node.js官网下载安装包,Git

gitblog_00280的博客 1032

如何快速上手Hexo主题Ayer:5分钟搭建专业博客

想要快速搭建一个优雅专业的个人博客吗?Hexo主题Ayer正是你需要的完美解决方案!这款干净优雅的Hexo主题以其简洁的设计和强大的功能,让新手也能在短短5分钟内创建出令人惊艳的专业博客。无论你是技术博主、创意写手还是个人品牌建设者,Ayer主题都能为你提供出色的博客搭建体验。 ## 🚀 Ayer主题的独特魅力 Hexo主题Ayer是一款专为追求简洁美学的用户设计的博客主题。它拥有现代化的界

gitblog_00213的博客 838

10分钟搭建设计师级静态博客:hexo-theme-solitude从安装到部署全指南

你是否还在为WordPress的臃肿加载而烦恼?是否想拥有一个兼具设计美感与加载速度的个人博客?本文将带你从零开始,使用hexo-theme-solitude主题打造一个符合Awwwards级别的静态博客网站,全程仅需10分钟,无需复杂配置即可获得专业级博客体验。 读完本文你将掌握: - 静态博客(Static Blog)的核心优势与部署流程 - hexo-theme-solitude主题的安装...

gitblog_01419的博客 719

5分钟快速上手安知鱼Hexo主题:打造优雅个人博客的完整指南

想要在5分钟内拥有一个既美观又功能强大的个人博客吗?安知鱼Hexo主题正是你需要的完美解决方案!这款基于hexo-theme-butterfly修改的现代化主题,专为追求简洁设计与丰富功能的博主量身定制。 ## 🚀 为什么选择安知鱼主题? 安知鱼Hexo主题不仅外观精美,更在功能上做到了极致平衡。它采用了扁平化设计风格,搭配明快的色彩系统,为用户提供愉悦的视觉体验。 [![安知鱼主题错误页

gitblog_00161的博客 492

html博客源码_5分钟搭建私人Java博客系统——Tale

本文适合刚学习完 Java 语言基础的人群,跟着本文可了解和运行 Tale 项目。示例均在 Windows 操作系统下演示本文作者:HelloGitHub-秦人HelloGitHub 推出的《讲解开源项目》[1]系列,今天给大家带来一款基于 Java 语言的轻量级博客开源项目——Tale 它拥有小、美、快、稳的特点。该项目完全开源、免费,能够让你快速搭建包含前、后台的博客系统,大大节省了搭建私人博...

weixin_39969257的博客 174

终极 Hexo NexT 主题配置指南:10分钟搭建优雅博客的完整教程 [特殊字符]

想要快速搭建一个优雅专业的个人博客吗?Hexo NexT 主题正是你需要的完美解决方案!作为目前最受欢迎的 Hexo 主题之一,NexT 以其简洁的设计、丰富的功能和极高的可定制性赢得了全球开发者的青睐。无论你是技术博主、设计师还是内容创作者,这个主题都能帮助你快速打造令人印象深刻的在线空间。 ## 📦 为什么选择 Hexo NexT 主题? Hexo NexT 主题不仅仅是另一个博客模板,

gitblog_00606的博客 965

如何快速搭建个人博客?Maupassant Hugo主题5分钟入门教程

Maupassant Hugo是一款简洁优雅博客主题,专为Hugo静态网站生成器设计。本教程将带你在5分钟内完成个人博客搭建,即使是技术新手也能轻松上手。 ## 为什么选择Maupassant Hugo主题? Maupassant Hugo主题以其简约的设计风格和丰富的功能深受博客爱好者喜爱。它不仅加载速度快,而且支持响应式布局,在手机、平板和电脑上都能完美展示。主题还内置了搜索、分类、标

gitblog_00489的博客 481

如何快速搭建个人博客:Mediator Jekyll主题5分钟快速入门

Mediator是一款受Medium启发的Jekyll主题,它能帮助你在短短5分钟搭建一个美观、现代的个人博客。无论是写作爱好者、技术博主还是内容创作者,都能通过这个主题轻松展示自己的作品。 ## 🚀 准备工作:环境搭建 在开始使用Mediator主题前,你需要确保系统中已安装以下工具: - Ruby(建议版本2.5.0或更高) - RubyGems - Bundler - Jekyll

gitblog_00978的博客 612

如何使用Leonids快速搭建响应式双栏博客5分钟上手教程

Leonids是一个基于Gatsby.js开发的简单固定侧边栏双栏博客模板,专为追求简洁高效的博主设计。它提供了开箱即用的响应式布局、优秀的性能表现和SEO优化,让你无需复杂配置即可拥有专业级博客网站。 ## Leonids博客模板的核心优势 ### ✨ 顶级性能与SEO表现 Leonids在Lighthouse性能测试中获得了全项100分的优异成绩,包括性能、可访问性、最佳实践和SEO四个核

gitblog_01024的博客 395

java 博客系统_讲解开源项目:5分钟搭建私人Java博客系统

本文适合刚学习完 Java 语言基础的人群,跟着本文可了解和运行 Tale 项目。示例均在 Windows 操作系统下演示本文作者:HelloGitHub-秦人HelloGitHub 推出的《讲解开源项目》系列,今天给大家带来一款基于 Java 语言的轻量级博客开源项目——Tale它拥有小、美、快、稳的特点。该项目完全开源、免费,能够让你快速搭建包含前、后台的博客系统,大大节省了搭建私人博客的时间...

weixin_39520393的博客 336

Lagrange:5分钟快速搭建个人博客的终极极简Jekyll主题

Lagrange是一款极简风格的Jekyll主题,专为个人博客设计,可通过Jekyll和GitHub Pages快速部署。这款主题以简洁优雅的设计著称,让用户能够专注于内容创作,无需过多关注复杂的技术细节。无论是博客新手还是有经验的用户,都能在几分钟内完成个人博客搭建。 ## 🚀 为什么选择Lagrange?三大核心优势 Lagrange主题凭借其独特的设计理念和实用功能,成为个人博客搭建

gitblog_00812的博客 604

如何快速安装 hexo-theme-icarus:5分钟完成现代博客主题配置

想要为你的Hexo博客打造一个简洁优雅的现代外观吗?hexo-theme-icarus正是你需要的完美解决方案!这款开源主题以简单、精致、现代的设计理念,为静态博客带来专业级的视觉体验。无论你是技术博主还是内容创作者,都能在5分钟内完成安装和基础配置。🚀 ## 📦 快速安装步骤 安装hexo-theme-icarus非常简单,只需要两个命令: ```shell npm install h

gitblog_00571的博客 448
上一篇: GitHub Actions入门教程:自动化部署静态博客
下一篇: 知乎有很多好玩的微信8.0状态视频,用Python一键下载
somenzz
博客等级 码龄17年 762粉丝 292原创
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值