通过 Jekyll 在 GitHub Pages 上搭建博客系统
谈到博客,可能很多小伙伴有过搭建的冲动或者经历,但是能坚持下来,不停更的却寥寥无几。我想告诉大家的是,一个博客最重要的是内容,任何人都可以写博文,但是如果写出来的博文对自己都没有多大用处,自己都懒得看的时候,可能也没有太多人愿意阅读这篇文章,这一点至关重要。如果你已经准备好搭建自己的博客了,那请你能放下手机、少刷视频,静下心来开始一点点的写作之路,同时也不要为了追求更新速度,降低博文的质量,更不要大量转载自己没有验证过别人写的博文。请不要告诉我,你自己是小白,写不出技术含量很高的博文,这一点不重要,每个人都有自己熟悉的领域,例如你擅长摄影、室内装修设计或者影视剪辑等,你完全可以将自己的心得记录下来,过了一段时间忘了的时候,也可以找出自己以前写的博文再学习一下。同样,你记录的这些知识点可能对其他人也是有用的,这才是博客存在的价值。
早些年前在搭建博客系统时,还有一些技术门槛,你需要掌握一些专业知识,例如UI设计、编程语言、Html、CSS、Javascript、数据库、WebServer、网络安全,SEO 优化等等。这些年随着 WordPress、Hexo、Typecho、Jekyll 等免费开源系统的相继推出,搭建一个属于自己的博客系统变得越来越简单,上述的这些系统也都基本解决了程序安全性、健壮性、SEO优化等方面的问题,功能可以满足一般用户需求,你只要选择安装一个自己喜欢的模板,就可以开始博客的写作之路了。
今天我就带领大家在 GitHub Pages 上搭建基于 Jekyll 的博客系统。为了简单化,本文省略掉了本地 Jekyll 运行环境的配置与安装,网络上有很多同类教程,有这方面需求的小伙伴在 google 自行搜索一下。
一、项目地址及演示地址
项目地址:https://github.com/hiifeng/hiifeng.github.io
本项目基于黄玄的项目修改,同时参考了 elmagnifico 的项目,在此首先对原作者表示感谢。目前版本主要修改的内容为增加了站点地图;切换 fontawesome-webfont 版本为 4.7.0 ,支持 QQ 、Telgram 等图标;增加返回顶部按钮;修改首页底部在手机浏览器中出现空白块的 BUG 等。
二、博客搭建
1、登录 github ,如果没有账号请提前创建一个。
2、打开如下项目地址,然后点击页面右上方的“Fork”按钮。
项目地址:https://github.com/hiifeng/hiifeng.github.io
3、如下图所示,修改仓库名为“账号名称.github.io“。例如:我的账号名是hicairo,仓库名就是 hicairo.github.io(仓库名即博客网址)。最后点击“Create Fork”按钮。
4、为当前仓库配置发布源,点击当前仓库右上角的“Settings”按钮后,再点击左侧菜单中的“Pages”按钮。
5、如图所示,确认“Branch”选项选择的是“main”中的“/root”后点击“Save”按钮。如果“Save”按钮为灰色不能点击,先将选项框中的“main”修改为“None”点击“Save”按钮后,再次选择“main”中的“/root”后点击“Save”按钮。
6、页面提示“GitHub Pages source saved.”然后点击顶部的仓库名称,返回仓库首页。
7、查看页面右侧的部署状态,如图所示当出现“github-pages now”后,说明静态页面已经生成完毕。这时在浏览器中打开博客网址,就可以访问了。
三、博客配置
1、由于 github.io 域名被污染,我们可以绑定一个被 cloudflare 代理的自定义域名解决。如下图所示,新建一条 CNAME 记录,目标指向 github 为了分配的域名,同时打开代理状态开关。
2、同 2.4 步骤,先点击当前仓库右上角的“Settings”按钮后,再点击左侧菜单中的“Pages”按钮。然后输入 Custom domain 后,点击“Save”按钮。
3、当出现“DNS check successful”时,说明域名绑定成功,这时就可以使用新的域名访问你的博客了。
4、Jekyll 是一个静态网站生成器,它使用 Ruby 编程语言编写,可以将使用标记语言编写的内容文件生成网页。下面是本项目的目录结构:
├── _includes # 包含文件目录 │ └── about # 自我介绍文件 ├── _layouts # 布局目录 │ ├── default.html # 缺省页面布局文件 │ └── post.html # 文章页面布局文件 └── _posts # 已发布文章目录 │ └── 2023-04-30-Goodbye-my-youth.md # 示例文章 ├── css # 样式表目录 ├── fonts # 字体目录 ├── img # 图片目录,可根据自己情况定义目录结构 ├── js # Javascript 文件目录 ├── less # Less 文件目录 ├── pwa # 渐进式 Web 应用配置文件目录 ├── 404.html # 404页面模板 ├── CNAME # Github Page 创建的自定义域名文件,无需手动修改 ├── Gemfile # 定义 Ruby 项目的依赖关系 ├── Gruntfile.js # 配置 Grunt 任务运行器 ├── LICENSE # 开源项目许可信息和使用条款 ├── README.md # 项目的自述文件 ├── Rakefile # Ruby 项目用于定义和管理任务的文件 ├── _config.yml # 博客配置文件,根据情况自行修改 ├── about.html # about 页面模板 ├── archive.html # archive 页面模板 ├── feed.xml # RSS 文件模板 ├── index.html # index 页面模板 ├── offline.html # offline 页面模板 ├── sitemap.xml # 站点地图文件
5、参考以下提示,修改_config.yml文件,配置自己的博客。
# Site settings title: HiFeng's Blog # Blog 的名字 SEOTitle: HiFeng's Blog_记录学习中的点点滴滴......# 指定 Blog 网页的描述信息 header-img: img/home-bg.jpg# Blog首页 header 调用的图片 email: [email protected]邮箱地址 description: "HiFeng's Blog_记录学习中的点点滴滴......"# 指定 Blog 网页的描述信息 keyword: "linux,debian,gentoo,ubuntu"# keyword信息,主要用途告诉搜索引擎这个 BLog 的关键词 url: "https://demo.hidoha.net" # your host, for absolute URL baseurl: "" # for example, '/blog' if your blog hosted on 'host/blog' # Publish posts or collection documents with a future date. future: true # 在这里设置 QQ、github、telegram 等账号信息 RSS: false wechat: false #qq_username: 10000 #weibo_username: ifeng #zhihu_username: ifeng github_username: hiifeng twitter_username: HiaiFeng facebook_username: HiaiFeng telegram_username: HiaiFeng #linkedin_username: firstname-lastname-idxxxx # Build settings # from 2016, 'pygments' is unsupported on GitHub Pages. Use 'rouge' for highlighting instead. highlighter: rouge permalink: pretty paginate: 10#每页显示几篇文章 exclude: [ "less", "node_modules", "Gruntfile.js", "package.json", "README.md", "README.zh.md", ] anchorjs: true # if you want to customize anchor. check out line:181 of `post.html` # If you have timezone issue (e.g. #68) in China, uncomment to use this: #timezone: CN # Gems # from PR#40, to support local preview for Jekyll 3.0 # make sure you have this gem installed # `$ gem install jekyll-paginate` plugins: [jekyll-paginate] # Markdown settings # replace redcarpet to kramdown, # although redcarpet can auto highlight code, the lack of header-id make the catalog impossible, so I switch to kramdown # document: http://jekyllrb.com/docs/configuration/#kramdown markdown: kramdown kramdown: input: GFM # use Github Flavored Markdown !important syntax_highlighter_opts: span: line_numbers: false block: line_numbers: true start_line: 1 # Disqus评论系统账号设置 disqus_username: iifeng # Netease settings netease_comment: false # Analytics settings # ba_track_id: [your track id] # Google Analytics # ga_track_id: "G-L0885W521V" # Format: UA-xxxxxx-xx # ga_domain: demo.hidoha.net # 右侧 sidebar(ABOUT ME)设置 sidebar: true # whether or not using Sidebar. p> # Baidu Analytics sidebar-about-description: "好好工作 快乐生活 ... <br> Contact me " sidebar-avatar: /img/Hiifeng.png # use absolute URL, seeing it's used in both `/` and `/about/` # Featured Tags featured-tags: true # whether or not using Feature-Tags featured-condition-size: 1 # A tag will be featured if the size of it is more than this condition value # Progressive Web Apps chrome-tab-theme-color: "#000000" service-worker: true # MathJax rendering for layout:page (e.g. post preview) page-mathjax: false # 友情链接设置: [ { title: "HiFeng's Blog", href: "http://www.hicairo.com" }, { title: "新月的博客", href: "https://blog.a--i.eu.org" }, # { title: "Kun Qian", href: "http://kunq.me" }, # { title: "Sherry Woo", href: "https://sherrywoo.me" }, ]
6、修改_config.yml文件后,然后修改 index.html、about.html、archive.html 等文件中的 description 和 header-img,这样 Blog 就替换成了你喜欢的风格。
7、_posts 目录中给出了文章的示例,在熟悉命名规则和相关语法后,删除该目录中的所有文件,然后就可以自己写博文了。
四、写到最后
看到这里,我相信你已经可以使用 Jekyll 在 GitHub Pages 搭建博客了,同时通过看_posts 目录中给出了示例文件,可以开始发布博文。但是可能出现对于 Jekyll 配置和 markdown 的语法还是一知半解的状态,在这篇文章开始,我已经说到了,对于一个博客最重要的是内容,至于页面做到清爽即可。如果你需要了解更多有关 Jekyll 配置和 markdown 的语法可以使用如下链接查看官方文档。
本文出处:HiFeng'Blog
本文链接:https://www.hicairo.com/post/72.html
版权声明:本博客所有文章除特别声明外,均采用CC BY-NC-SA许可协议。转载请注明出处!