MacOS下安装Github+Jekyll 搭建博客
程序员文章站
2022-07-14 15:25:23
...
区别于其他的博客系统比如WordPress,Jekyll仅仅是一个解析引擎。它的作用是分析用户的配置文件并生成静态网页文件。 而访问者实际访问的是位于_site文件夹内的html。写了这么长时间的服务器动态脚本,Jeklly仿佛又回到了原点。 不过在Github的博客服务和其他工具的支持下,Jekyll有其他博客系统无法相比的优势:
-
速度
因为是静态网页,没有后台逻辑各种复杂交互。另外在Github支持下,你可以免费地获取一个还不错的博客系统。
-
安全
因为是静态网页,所以。。
-
版本控制
借助Github的代码仓库,天然融合了版本控制功能。而且也不用担心丢失问题。
安装
默认认为MacOS lion 10.7 下已经装好了ruby,macport,python,git,esay_install
-
注册Github
到github.com注册就可以了。
-
安装gem
先把gem源码克隆下来
进如gem工程的目录,运行$ git clone https://github.com/rubygems/rubygems.git
setup.rb
$ sudo ruby setup.rb
-
安装Jekyll
运行命令$ sudo gem install jekyll
安装完Jekyll后,基本上就可以生成网页文件了,方法可以参见这个链接
-
安装Jekyll-Bootstrap/部署到Github
我们可能没有耐心从零开始配置一个blog,Jekyll提供了一个模板。 http://jekyllbootstrap.com/
另外Github把名字为 USERNAME.github.com 的工程自动视为用户blog,我们可以借助这点直接部署到github上。
以下引用http://jekyllbootstrap.com/index.html#start-now的安装方法
push到Github上后,大概等待10分钟,服务器会把你的文件解析完成,然后访问 USERNAME.github.com 便可以看得到效果 另外在本地运行$ git clone https://github.com/plusjade/jekyll-bootstrap.git USERNAME.github.com $ cd USERNAME.github.com $ git remote set-url origin git@github.com:USERNAME/USERNAME.github.com.git $ git push origin master
$ jekyll --server
也可以看到效果
配置
-
RDiscount
自带的markdown解析器有问题,对中文支持不好,下载RDiscount解析器:
修改$ sudo gem install rdiscount
_config.yml
文件,修改或添加以下属性:markdown: rdiscount
-
实现代码高亮
安装Pygments
在$ sudo easy_install Pygments
_config.yml
中开启 Pygments
在pygments: true
HOME_PATH/assets/themes/twitter/syntax
下放置default.css文件
修改HOME_PATH/_includes/themes/twitter/default.html
文件,在引用的样式表最下面加入
之后就可以实现代码高亮了,如以下代码(百分号前的下划线是转义字符,粘贴时实际应该去掉)<link href="/assets/themes//syntax/default.css" rel="stylesheet">
{\% highlight cpp \%} #include <iostream> int main(){ std::cout << "Hello World!" << std::endl; return 0; } {\% endhighlight \%}
-
新建Page
可以在新建的文件头部修改显示信息rake page name="testpage.md"
--- layout: page title: "testpage" description: "" group: navigation ---
当group设置成navigation时,其会显示在网页的上边栏
-
新建Post
同样可以修改显示信息rake post title="testpost"
--- layout: post title: "testpost" description: "" category: category1 tags: [tag1, tag2] ---
tags标签可以是多个,用逗号隔开,逗号后面必须有空格
-
修改tagline BUG:在POST中,tagline一直显示固定信息. 将文件
HOME_PATH/_includes/themes/twitter/post.html
第二行改为(去掉反斜杠)<h1>\{\{ page.title \}\} <small>\{\{ page.tagline \}\}</small></h1>
上一篇: 304 Not Modified状态码
下一篇: Vim 练级攻略
推荐阅读
-
MacOS下mysql 8.0.18 安装配置方法图文教程
-
cPanel面板搭建WordPress博客有多快?安装步骤分享
-
centos下yum搭建安装linux+apache+mysql+php环境教程
-
linux Cenos-7.0下安装jdk搭建环境变量
-
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
-
在cmder下安装ipython以及环境的搭建
-
Windows7下安装 Nodejs 并在 WebStorm 9.0.1 下搭建编译 LESS 环境的图文教程
-
Linux系统下搭建MantisBT环境以及Apache+PHP+MySql的安装
-
windows下vue-cli及webpack搭建安装环境
-
Linux+php+apache+oracle环境搭建之CentOS下源码编译安装PHP