Jekyll构建静态网页博客的学习历程

Categories: 学习分享 2024-12-14

契机

上一篇内容讲了怎么白嫖到各个大厂云服务器的。我用的是AWS亚马逊云服务器，在这台服务器上安装了wordpress，初试用之下发现功能确实非常全面，但是我的需求仅仅是码字记录一下生活而已。于是就找到了静态网页的技术，从而选中了jekyll。

Jekyll是怎么工作的

Jekyll是一个静态站点生成器。它可以把Markdown文本构建成静态网站。Jekyll的工作流程如下：

1. 内容创作：
   • 用Markdown写作博客文章
   • 在_posts目录下创建文件，命名格式为YYYY-MM-DD-标题.md
   • 在文件开头添加YAML头信息（Front Matter）设置文章属性
2. 目录结构：
   • _posts/: 存放博客文章
   • _layouts/: 存放页面模板
   • _includes/: 存放可重用的页面组件
   • assets/: 存放图片、CSS、JavaScript等静态资源
   • _config.yml: Jekyll的配置文件
3. 构建过程：
   • Jekyll读取Markdown文件
   • 解析YAML头信息
   • 将Markdown转换为HTML
   • 应用布局模板
   • 生成最终的静态HTML页面
4. 部署：
   • 生成的静态文件位于_site目录
   • 可以部署到任何Web服务器
   • 支持GitHub Pages直接托管

Jekyll的优势在于：

• 不需要数据库
• 加载速度快
• 安全性高
• 易于版本控制
• 支持Markdown写作

本地构建以后

Github Pages托管

GitHub Pages是GitHub提供的静态网站托管服务，可以直接托管Jekyll网站。部署步骤如下：

1. 创建GitHub仓库：
   • 创建一个新的仓库，命名为用户名.github.io
   • 这个特殊的仓库名会自动启用GitHub Pages功能

2. 推送本地代码：

   • git init
   • git add .
   • git commit -m “初始化Jekyll博客”
   • git remote add origin https://github.com/用户名/用户名.github.io.git
   • git push -u origin main
3. 配置GitHub Pages：
   • 进入仓库的Settings页面
   • 找到Pages选项
   • 选择main分支作为源分支
   • 保存后等待几分钟，网站就会在https://用户名.github.io上线
4. 自定义域名（可选）：
   • 在仓库中创建CNAME文件
   • 写入你的自定义域名
   • 在域名提供商处添加DNS记录

部署到云服务器上

将Jekyll博客部署到云服务器需要以下步骤:

1. 安装必要环境:

   安装 Ruby 和开发工具

   sudo apt update sudo apt install ruby-full build-essential zlib1g-dev nginx

   安装 Jekyll 和 Bundler

   gem install jekyll bundler

2. 配置 Nginx:

   创建 Nginx 配置文件

   sudo nano /etc/nginx/sites-available/jekyll

   添加以下配置:
   nginx
   server {
   listen 80;
   server_name 你的域名;
   root /var/www/jekyll/_site;
   location / {
   try_files $uri $uri/ =404;
   }
   }

3. 部署网站:

   创建部署目录

   sudo mkdir -p /var/www/jekyll sudo chown -R $USER:$USER /var/www/jekyll

   克隆代码并构建

   cd /var/www/jekyll git clone 你的仓库地址 . bundle install bundle exec jekyll build

4. 启用网站:

   创建符号链接并重启 Nginx
   sudo ln -s /etc/nginx/sites-available/jekyll /etc/nginx/sites-enabled/
   sudo nginx -t
   sudo systemctl restart nginx

5. 自动部署(可选):
   创建部署脚本 deploy.sh:

   #!/bin/bash
   cd /var/www/jekyll
   git pull
   bundle exec jekyll build

   设置定时任务:

   crontab -e
   添加以下内容，每小时更新一次
   0 * * * * /var/www/jekyll/deploy.sh

这样，你的Jekyll博客就成功部署到云服务器上了。访问你配置的域名就可以看到网站内容。记得配置SSL证书以启用HTTPS。

总结

心得体会

经过整整一周的”折腾”，我终于也拥有了自己的个人博客网站，这种感觉真的很棒！

在这个过程中，我深刻体会到了学习方式和思考方式对效果的巨大影响。正如那句话所说：

礼佛的时候抽烟和抽烟的时候礼佛，殊途同归却天差地别。

很多时候，我们在GitHub上找到心仪的项目后，往往急于求成：立即fork到自己的仓库，照着README快速部署。这种只知其然，不知其所以然的方式，表面上看起来简单快捷，但对于非程序员来说，往往会在细节处跌倒。比如我到现在还没搞明白，为什么自动触发workflow构建网页时总是报错，提示缺少一堆gems。

这种带着强烈目的却缺乏系统规划的学习方式，效率其实很低。如果能静下心来，先制定计划再动手，整个学习过程应该可以缩短一半。

收获

这几天虽然不断踩坑（尤其是本地构建完全正常，推送到GitHub却总是构建失败，把ChatGPT的免费额度都用光了），但收获也不少：

• 掌握了git仓库的基本使用和配置
• 学会了GitHub Pages托管网站的配置方法
• 理解了Jekyll的安装和使用流程
• 熟悉了ChatGPT和Cursor的使用（这个好像不能算技术收获…）

特别鸣谢

• ChatGPT：解决了我无数的技术难题（Cursor你真贴心，不过也别忘了感谢自己哦）
• Jekyll开发团队：提供了这么优秀的静态网站生成器
• GitHub：提供了可靠的免费托管服务
• tw93：感谢分享如此养眼的主题 cursor就是这么帮忙的