如何在Windows平台上基于github搭建个人博客平台
本文将介绍在Windows平台上搭建基于github pages 的个人博客网站的过程,以及利用Jekyll进行本地博客调试的过程,对于不懂前端的人来说是一个比较基础的入门教程。另外,本文也同步发布在我的个人博客上面,本文中的一些外部超链接,所涉及到的工具typora, 博客模板的github地址,基于Ruby的本地博客调试方式,博客主题和markdown语法等更多的详细信息,欢迎访问我的博文地址:
https://chauby.github.io/2019/12/14/How-to-build-a-blog-with-github-pages/。
简介
作为一个非前端和网站的开发人员,想要自己搭建个人博客来分享日常的学习和生活,一直找了好久的平台。之前在CSDN上写过一些博客,但是许久不更新就懒得再管了。最近因为研究需要,发现有太多的东西需要记录,同时,Markdown也越用越顺手,就想着能够建立自己的博客平台来分享自己平时研究和学习过程中的一些技术问题和自己对于研究的一些思考。后来发现Github提供了这样的平台(原谅我的后知后觉),就想着能够自己搭建一个博客平台。
本人要求不高,主题简洁大方,发布方便,能够分享自己的博文就可以。而github提供的github pages基本上能满足我的需求了,使用也方便,搭建好环境以后,可以使用Markdown来编写博客,并且上传到github上托管,非常方便。
一. Markdown 简介
1. 语法简介
可参考我的另一篇文章Markdown的基本语法。
2. Markdown编辑器typora
为了方便写Markdown,我们需要一个Markdown的解释器来实时预览写出来的效果。市面上有很多支持Markdown语法的代码编辑器可选,例如vscode,sublime text,atom等等。我选择的是一款目前还处于beta阶段的Markdown编辑器typora,与传统的分两栏写markdown和预览markdown文件不同的是,typora能够“所见即所得”,写完了就可以实时在当前位置看到最终效果。而且typora本身支持内嵌LaTex数学公式,本人试过,几乎所有的公式都可以嵌入,而且支持公式的自动编号,可以作为平时快速写作的一个高效编辑器。这里不仔细讲typora的用法,网上可以找到许多教程,例如Typora完全使用详解,有兴趣的朋友可以了解一下。
二. 基于Github的博客搭建
1. 创建博客仓库
1.1 Github代码仓库简介
Github是一个在线的代码托管平台,支持使用git进行代码的版本管理,用户可以自由注册和将自己的代码托管到远程的Github仓库上,然后随时随地可以下载使用。这里不对Github的使用做深入的解释,感兴趣的人可以自行搜索。这里假设阅读本文的人已经对Github的使用有了一定的了解。本人的这个博客其实就是一个托管在Github仓库上的代码仓库,github提供了种特殊的repo,允许用户简单地创建自己的博客网页。
1.2 创建Repo
在自己的Github上新建一个repository,这里注意,跟普通的代码仓库不一样,我们要创建一种特殊的repository,仓库的名字只能取为你的github用户名.github.io,例如我的用户名叫chauby,那么我的这个仓库名字就只能取chauby.github.io。如下图所示,由于我已经有这样一个仓库了,所以提醒我有错误:
然后点击下面绿色的“Create repository”,仓库就创建好了。然后我们创建好的博客的首页地址就是 https://yourname.github.io,这里yourname就是你的github账户名字。
仓库创建好了以后还不行,还需要点击settings来管理仓库,修改一部分的设置才可以,settings可以点击右上角:
进去以后向下拉,将Github Pages下面的Source设置为Master branch即可,至此,博客仓库的创建已经完成了,然后就需要在这个仓库里面填入我们的博客主题和内容控制代码。如果读者喜欢我的博客模板,可以直接从我的github仓库https://chauby.github.io下载,然后使用git checkout命令回到最初的版本即可,最初的版本是一个空仓库,只有简单的示例页面。下载命令为:
git clone https://github.com/chauby/chauby.github.io.git
2. 选择自己喜欢的主题
用户也可以自行选择其他主题,在jekyll主题官网 上有很多开源的主题,可以选择自己喜欢的,也可以自行搜索jekyll主题,网上有不少开源的主题,选择自己喜欢的即可。
3. 基于ruby的本地编写和调试博客内容
Ruby的下载地址,安装过程的详细教程可参考Win10安装jekyll和ruby环境。Ruby下载完成以后直接双击安装,除了安装路径,其他一路默认选项就行。安装路径最好不要包含空格(本人没有完整去验证过,但是我第一次的安装路径包含了空格,后面安装其他东西的时候老是不成功。重新选择了不包含空格的安装路径来安装了ruby后,安装后续的其他问题一路顺利)。
Ruby安装完成以后会弹出一个窗口让你选择3个选项之一来安装,一般直接选3就是,安装过程需要一定的时间。如果这部分没有安装成功,可以使用如下的命令重新安装:
ridk install
这个命令直接在windows的cmd中执行即可,后面的其他安装命令也是一样的。安装成功以后直接回车即可。
上述安装完成以后,需要执行以下命令安装bundle:
gem install bundle
然后是安装jekyll,由于github pages是基于jekyll,所以我们本地安装jekyll以后进行本地的网页调试,最后呈现的结果与在线的是一样的,调试完成了在推送到github仓库部署就行。
gem install jekyll
最后需要安装github-pages,这部分会持续安装很多东西,所以耗时比较长,耐心等待即可。
gem install github-pages
至此,所有的安装工作已完成,此时cd到对应博客的目录,运行以下命令:
bundle exec jekyll serve -P 5555 --watch
--watch
表示这个本地网页是实时刷新的,当你更改网页的内容时它能实时的变化,而不用不断重启和加载网页。-P 5555
参数是指定端口号为5555
,Jekyll默认的端口号是4000,会与福昕阅读器的端口号冲突(如果你的电脑安装了福昕阅读器),所以还是指定端口号最佳。正常情况下你能看到类似下图的启动界面了,此时在浏览器的地址栏输出 localhost:5555
就能看到你的博客了。如果不行,请参考后文的常见问题和解决办法。
到这里,博客的平台搭建就算完成了,可以在本地调试完写好的博客然后再使用git推送到github的远程仓库,远程仓库的博客就更新了。
4. 博客的编写
本文所采用的模板编写博客时非常简单,根目录文件路径如下图所示:
其中,_posts目录下分类存放了我的所有博客文章的源文件,博客所使用到的图片都放在images目录下,而平时最主要用到的目录就是这两个,只要在其中添加相应的文件和图片即可完成博客的编写,非常方便。
如果我们想要添加、减少或改变博客首页的板式,可以编辑_config.yml文件,其中的细节这里不再赘述,大家可以自行摸索。目录pages/下面是博客的各个板块的网页文件,用户也可以自行添加和删除,但是要配合修改__config.yml文件。
三. 常见问题
1. 提示 Could not find gem ‘tzinfo-data’
则打开终端切换到user.github.io/
路径下,然后运行以下命令:
bundle install
然后等待安装tzinfo、tzinfo-data、wdm等,需要等待一段时间。
2. 提示 Error: Permission denied -bind(2) for 127.0.0.1:4000
出现这个问题是提示端口号被占用,因为Jekyll默认的端口号是4000,可能与其他软件冲突(例如福昕阅读器)。所以最好的办法是运行jekyll的启动命令时指定端口号(例如5555):
bundle exec jekyll serve -P 5555 --watch
注意:此时浏览器要想访问本地的博客内容,应该输入 localhost:5555 。
四. 参考
- 本博客的搭建过程使用了Zhuang Ma的博客主题码志,此处致谢。
时间有限,本博客就暂时写到这里,有时间会再更新和补充一些细节。
- 如何买卖股票?不要慌,我有妙招!
- 2017.11.7解题报告
- TensorFlow从0到1 - 11 - 74行Python实现手写体数字识别
- 让priority_queue支持小根堆的几种方法
- 一招解决4道leetcode hard题,动态规划在字符串匹配问题中的应用
- 细数Python中的数据类型以及他们的方法
- 洛谷 P3807 【模板】卢卡斯定理
- 数据城堡参赛代码实战篇(六)---使用sklearn进行数据标准化及参数寻优
- 震惊!Vector两行代码求逆序对,六行代码过普通平衡树
- 数据城堡参赛代码实战篇(五)---使用sklearn解决分类问题
- 洛谷P1894 [USACO4.2]完美的牛栏The Perfect Stall
- [编程经验]Python生成器、迭代器与yield语句小结
- TensorFlow从0到1 - 12 - TensorFlow构建3层NN玩转MNIST
- 数据城堡参赛代码实战篇(四)---使用pandas合并数据表
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 猿实战08——属性库实现之属性关系绑定
- 猿实战07——属性库之实现电商系统基石模块
- 栈与队列简介
- Confluence 6 邀请你的小组来使用应用 APP
- 这可能是你见过最好的Redis主从复制原理
- 移动直播集成问题
- TRTC功能咨询
- TKE集群pod镜像拉取失败定位思路
- Android内存管理(JVM 、DVM(dalvik) 、ART简单介绍)
- WordPress 站点地址被恶意篡改的防护方案讨论
- 猿实战06——不一样的地址管理
- Redis常用命令详解
- three.js 制作逻辑转体游戏(下)
- ROS机器人TF基础(坐标相关概念和实践)
- (在模仿中精进数据可视化01) 全国38城居住自由指数可视化