技术人如何利用 github+Jekyll ,搭建一个独立免费的技术博客

  • 时间:
  • 浏览:0
  • 来源:幸运快3_快3平台代理_幸运快3平台代理

上次一帮人留言说,技术博客是系统系统进程员的标配,但据我所知绝大帕累托图技术同学到现在仍然必须被委托人的技术博客。愿因 有什么都有有,就有懒的写,就有怕写不好,还就有一个劲想憋个大招,幻想做到完美再发出来,结果一个劲胎死腹中。但之什么都有有更多系统系统进程员是不知道怎么才能 才能 去搭建可是博客,之什么都有有如今搭建可是被委托人技术博客非常简单,其中最简单搭建法律法子莫属使用 GitHub Pages + Jekyll 了,我的博客什么都有有使用这俩 技术。

GitHub Pages

Github Pages 是面向用户、组织和项目开放的公共静态页面搭建托管服务,站点都才能被免费托管在 Github 上,让他选着使用 Github Pages 默认提供的域名 github.io 愿因 自定义域名来发布站点。Github Pages 支持 自动利用 Jekyll 生成站点,也同样支持纯 HTML 文档,将你的 Jekyll 站点托管在 Github Pages 上是可是不错的选着。

使用 Github Pages 搭建博客有以下几次优点:

  • 完整免费,其中服务器、流量、域名有哪些的都管,完整零费用搭建可是技术博客
  • 写博客什么都有有提交代码,让写作和编程的体验保持一致
  • 支持绑定被委托人的域名
  • 提供流行的网页主题模板

缺点也是有的:

  • 不支持动态内容,博客都才能就有静态网页,一般会使用 Jekyll 来构建内容。
  • 博客必须被百度索引,因 Github 和百度有过节,什么都有有 Github 就把百度给屏蔽了。
  • 仓库空间不大于1G
  • 每个月的流量不超过1000G
  • 每小时更新不超过 10 次

Github Pages 使用 Jekyll 来构建内容,必须 Jekyll 是有哪些呢?

Jekyll 介绍

Jekyll 是可是简单的博客底部形态的静态站点生产机器。它有可是模版目录,其中涵盖原始文本格式的文档,通过可是转换器(如 Markdown)和我们 歌词 的 Liquid 渲染器转化成可是完整的可发布的静态网站,让他发布在任何你喜爱的服务器上。Jekyll 也都才能运行在 GitHub Page 上,也什么都有有说,让他使用 GitHub 的服务来搭建你的项目页面、博客愿因 网站,什么都有有是完整免费的。

后来愿因 我们 歌词 什么都有有在 GitHub 上方使用话语,到必须知道 Jekyll 的语法,一般 Github 会自动将我们 歌词 写的 Markdown 文件转加在静态页面。使用 Jekyll 都才能使用 Markdown 语法来写你的文章,不过 Markdown 语法非常简单,做为系统系统进程员来讲基本上两7天 就掌握了,我们 歌词 也都才能参考这篇文章:markdown 使用总结。

给我们 歌词 分享或多或少 Jekyll 主题,这俩 网站下有什么都有有 http://jekyllthemes.org/ 主题,我们 歌词 都才能根据被委托人的爱好去选着博客主题。

我的被委托人博客

我的博客经过了可是阶段,第可是阶段,完整依托于使用 GitHub Pages 来构建;第八个阶段,将博客托管于国外的可是服务商;第可是阶段,服务器迁移回到国内、域名备案。可是也写过几篇关于技术博客的文章,如下:

  • 千里追踪博客之殇
  • 历时27天 ,我的博客(www.ityouknow.com)终于又活了过来
  • 技术博客有有哪些事儿

使用 Github Pages + Jekyll 构建可是技术博客很简单,基本上步骤什么都有有网上找可是被委托人喜欢的主题,直接 Fork 到被委托人的 Github ,什么都有有在删掉原博客中的内容,在上传被委托人的文章即可,以我被委托人的博客为例。

我的博客最初使用的是Yummy-Jekyll,但这俩 主题愿因 尽两年多都必须更新了。什么都有有后期我在这俩 主题的基础上做了或多或少改动,其涵盖依赖组件的更新,结合被委托人状况对个别页面进行了改版,就成为了现在的样子:

使用这俩 主题的愿因 是,我比较喜欢简洁大气的风格,什么都有有此博客主题对代码展示支持良好。

快速构建可是博客

以我的博客为例,介绍怎么才能 才能 最快搭建可是博客。这也是我博客经历的第可是阶段。

1、首先打开地址https://github.com/ityouknow/ityouknow.github.io,点击 Fork 按钮将代码克隆qq一份到被委托人的仓库。

过上一分钟,你的 github 仓库发现可是 ityouknow.github.io 项目。

2、删除 CNAME 文件

删除项目中的 CNAME 文件,CNAME 是定制域名的可是使用的内容,愿因 不使用定制域名会处于冲突。

3、设置 GitHub Pages

点击 Settings 按钮打开设置页面,页面往下拉到 GitHub Pages 相关设置,在 Source 下面的复选框中选着 master branch ,什么都有有点击旁边的 Save 按钮保存设置。

4、重命名项目

点击 Settings 按钮打开设置页面,重命名项目名称为:github_username.github.io。

github_username 有你的 github 登录用户名

5、重命名可是,再次回到 Settings > GitHub Pages 页面

会发现处于可是可是地址: https://github_username.github.io

这俩 可是,你访问此地址愿因 都才能看过博客的首页,什么都有有点击文章的时链接跳转地址不对,这是愿因 少配置了可是文件。

6、配置 _config.yml

打开项目目录下的 _config.yml 文件,修改以下配置:

repository: github_username/github_username.github.io
github_url: https://github.com/github_username
url: https://github_username.github.io

这可是在访问地址: https://github_username.github.io,就会发现博客可愿因 构建完成了。剩下的事情什么都有有去项目的 _posts 目录下删除掉我的文章,什么都有有按照 Jekyll 的语法就写被委托人的文章就好了。

github_username 为你的 github id。

自定义域名

之什么都有有通过地址https://github_username.github.io都才能正常访问博客,什么都有有技术小伙伴们肯定一帮人想使用被委托人的域名访问博客,可是的需求 GitHub Pages 也是支持的。

首先都才能设置域名解析,将域名的地址指向被委托人的 github 博客地址。这里以万网的域名配置为例,选着都才能设置的域名点击解析,在域名解析页面加在以下两条记录

红框内,都才能填写被委托人github_username值。

什么都有有重新打开项目的 Settings > GitHub Pages 页面,Custom domain 下的输入框输入刚才设置的域名:xxx.com,点击保存即可。

重新配置 _config.yml

打开项目目录下的 _config.yml 文件,修改以下配置:

url: http://www.xxx.com

等待英文一分钟可是,浏览器访问地址:www.xxx.com 即可访问博客。

自定义 DIY 博客

一般同学到上方这俩 步也就完成了,基本满足了 1000% 技术同学的需求。但还是有或多或少同学们有更高的追求,比如说使用 Github Pages 之什么都有有简单方便,什么都有有必须被百度检索白白流失了少许的流量,还有可是愿因 或多或少可是,博客网络访问稳定性就有很高。

当时我在国外有几次虚拟机,可是用作它用,可是在上方安装了可是 Nginx 作为静态页面的服务器。首先我在本机(win10)安装了 Jekyll 环境,将 Github 上的博客代码下载下来可是,在本机编译成静态的 Html ,什么都有有手动上传到服务的 Nginx 目录下;什么都有有将域名指向虚拟机。

非常不建议我们 歌词 实践以上这段内容,win10 上方安装 Jekyll 环境是一段惨痛的经历。

就可是很麻烦的步骤我用了几次月后,之什么都有有是受不了了,一方面愿因 服务器在国外,有可是仍然不稳定(愿因 愿因 服务器安装了代理),被委托人面我都才能使用或多或少功能,使用有有哪些功能的前提是网站都才能备案,那段时间腾讯云在做活动,就把博客又从国外搬了回来,顺便重新优化了一下流程。

仍然把博客托管在 Github 上方,每次提交完代码后,在腾讯云上方执行可是脚本,这俩 脚本会自动从 Github 拉取最新更新的文件,并自动生产静态的 Html 文件推送到 Nginx 目录,域名重新指向这台服务器。都才能在 Github 上方设置或多或少钩子,当提交代码的可是自动触发脚本,也都才能定时触发脚可是发布文章。

脚本内容如下:

cd /usr/local/ityouknow.github.io
git pull http://github.com/ityouknow/ityouknow.github.io.git
jekyll build --destination=/usr/share/nginx/html

执行此脚本的前提是安装好 git\jekyll 环境,这俩 网上有什么都有有案例,这里就不再多描述了。

关于 Jekyll 环境搭建和使用都才能参考这里:https://jekyllcn.com/docs/home/

自动化部署

这7天 看过方志朋搞了自动化部署,我也按照他的步骤实践了一番,很好用,什么都有有把自动化部署这段写补上。

配置 Webhook

在开发过程中的 Webhook,是某种通过通常的 callback,去增加愿因 改变 Web page愿因 Web app 行为的法律法子。有有哪些 Callback 都才能由第三方用户和开发者维持当前,修改,管理,而有有哪些使用者与网站愿因 应用的原始开发必须关联。Webhook 这俩 词是由 Jeff Lindsay 在 10007 年在计算机科学 hook 项目第一次提出的。

用大白话讲什么都有有,代码仓库在收到代码提交的可是,会自动触发可是 url 类型的通知,让他根据这俩 通知去做或多或少事情,比如提交了代码就自动去部署项目。

我们 歌词 的自动部署博客也是利用了这俩 机制,Github 自带了 Webhook 功能,我们 歌词 直接配置即可使用。

在 Github 仓库的项目界面,比如本博客项目 https://github.com/ityouknow/ityouknow.github.io,点击 Setting->Webhooks->Add Webhook,在加在 Webhooks 的配置信息,我的配置信息如下:

Payload URL: http://www.ityouknow.com/deploy
Content type: application/json
Secret: 123456

如下图:

服务器接受推送

我们 歌词 都才能在博客的服务器上方建立可是服务,来接收 Github 提交代码后的推送,从而来触发部署的脚本。 Github 上有可是开源项目都才能做这俩 事情 github-webhook-handler。

这俩 开源项目目的很单纯,什么都有有负责接收 Github 推送过来的通知,什么都有有执行部署脚本,不过他是使用 NodeJs 来开发的,什么都有有我们 歌词 先都才能在 Centos 上方按照 Node 环境。

centos7 安装 Node 环境

首先加在源

sudo rpm -ivh https://dl.fedoraproject.org/pub/epel/7/x86_64/Packages/e/epel-release-7-11.noarch.rpm

//yum安装node.js
yum install -y nodejs

什么都有有在安装 github-webhook-handler

npm install -g github-webhook-handler     #安装 github-webhook-handler
#愿因

必须安装成功,都才能选着法2来安装
npm install -g cnpm --registry=http://r.cnpmjs.org
cnpm install -g github-webhook-handler

安装成功可是,我们 歌词 都才能加在可是脚本。进入到安装目录下:

cd  /usr/lib/node_modules/github-webhook-handler

新建 deploy.js

vi deploy.js

脚本内容如下:

var http = require('http')
var createHandler = require('github-webhook-handler')
var handler = createHandler({ path: '/deploy', secret: 'ityouknow' }) //监听请求路径,和Github 配置的密码
 
function run_cmd(cmd, args, callback) {
  var spawn = require('child_process').spawn;
  var child = spawn(cmd, args);
  var resp = "";
 
  child.stdout.on('data', function(buffer) { resp += buffer.toString(); });
  child.stdout.on('end', function() { callback (resp) });
}
 
http.createServer(function (req, res) {
  handler(req, res, function (err) {
    res.statusCode = 404
    res.end('no such location')
  })
}).listen(10006)//监听的端口
 
handler.on('error', function (err) {
  console.error('Error:', err.message)
})
 
handler.on('push', function (event) {
  console.log('Received a push event for %s to %s',
    event.payload.repository.name,
    event.payload.ref);
  run_cmd('sh', ['/usr/local/depoly.sh'], function(text){ console.log(text) });//成功后,执行的脚本。
})

脚本的作业什么都有有启动可是监听端口来接收请求,接收到请求后执行部署脚本,脚本内容的关键点愿因 标注上注释。

部署博客的脚本如下:depoly.sh

echo `date`
cd /usr/local/ityouknow.github.io
echo start pull from github 
git pull http://github.com/ityouknow/ityouknow.github.io.git
echo start build..
jekyll build --destination=/usr/share/nginx/html

什么都有有拉取代码,进行部署而已。

这俩 脚本的启动都才能借助 Node 中的可是管理 forever 。forever 都才能看做是可是 nodejs 的守护系统系统进程,才能启动,停止,重启我们 歌词 的 app 应用。

不过我们 歌词 的先安装 forever,什么都有有都才能使用 forever 来启动 deploy.js 的服务,执行命令如下:

npm install forever -g   #安装
$ forever start deploy.js          #启动
$ forever stop deploy.js           #关闭
$ forever start -l forever.log -o out.log -e err.log deploy.js   #输出日志和错误
/root/node-v8.12.0-linux-x64/lib/node_modules/forever/bin/forever start -l forever.log -o out.log -e err.log deploy.js

愿因

报错:
/root/node-v8.12.0-linux-x64/lib/node_modules/forever/bin/forever start -a -l forever.log -o out.log -e err.log deploy.js

一并一般状况下,我们 歌词 不想对外保留什么都有有端口,什么都有有都才能通过博客的地址来转发,都才能在 Nginx 上方加在可是转发配置,用来监听的 /deploy 请求转发到 nodejs 服务上,配置代码如下:

location = /deploy {
     proxy_pass http://127.0.0.1:10006/deploy;
}

可是们 歌词 整个自动化部署就完了,每次提交代码时,Github 会发送 Webhook 给地址http://www.ityouknow.com/deploy,Nginx 将 /deploy 地址转发给 Nodejs 端口为 310006 的服务,最后通过 github-webhook-handler 来执行部署脚本,已到达自动部署的目的。

可是只都才能我们 歌词 提交代码到 Github ,就会自动触发博客的自动化部署。

愿因 会一个劲出现的间题

有或多或少小伙伴反馈在克隆qq博客的可是一个劲出现了或多或少间题,在这里集中回复一下。

1、克隆qq博客后格式丢失

这是什么都有有读者反馈的第可是间题,愿因 我的博客 css 和 图片是倒入另外可是域名下的:www.itmind.net ,什么都有有这块我们 歌词 克隆qq过去都才能改成本地的。

主要涉及的文件 ityouknow.github.io\_includes 目录下 head.html 和 footer.html 可是文件夹,将文件中的 http://www.ityouknow.com/xxx/xxx 改为相对路径/xxx/xxx即可。

2、留言功能丢失

这里就都才能我们 歌词 修改一下 _config.yml 中 gitalk 的配置信息。具体怎么才能 才能 操作我们 歌词 都才能参考这篇文章 jekyll-theme-H2O 配置 gitalk。注册完可是,都才能在 _config.yml 配置以下信息:

gitalk:
    owner: ityouknow
    repo: blog-comments
    clientID: 61bfc53d957e74e78f8f
    clientSecret: 31c61e66cdcc9ada8db2267ee779d0bdafac434c

将这里改成你注册好的信息

3、博客

博客现在还缺检索功能,下一页和上一页功能、系列文章优化查看的功能,我们 歌词 克隆qq后有完善功能的,也请帮忙留意,一并把这俩 博客完善的更好。

最后,我们 歌词 都才能在这篇文章下留下你的被委托人博客地址,方便同行们观赏、交流、学习。

猜你喜欢

「燒得聖誕樹 就搞得聖誕節」 夫婦飛北京過節避暴亂

圖:上月有暴徒焚燒九龍塘又一城商場內的巨型聖誕樹,場面驚嚇以往一踏入冬天,香港各處街頭和商場都不 聖誕裝置和聖誕樹,展現歡樂氣氛,今年街上卻冷清得多。上月,暴徒闖入九龍塘又一

2020-01-29

DIY雨傘套環保又美觀

盛載濕透的雨傘,雨傘膠袋並非唯一選擇,近期坊間不少環保團體舉辦工作坊,教導市民利用破舊的雨傘、防水布料,DIY製成雨傘袋,作為雨傘膠袋的替代品,既環保又美觀。社區環保站「綠在元

2020-01-29

轩辕剑龙舞云山炼妖怎么玩

【斗蟹-轩辕剑龙舞云山】相信玩过轩辕剑龙舞云山游戏的玩家都知道炼妖玩法,玩家还后能 通过炼妖玩法打造最强神宠。只有炼妖玩法缘何玩呢?斗蟹小编为亲戚亲戚朋友带来了轩辕剑龙舞云山

2020-01-29

钱锺书是如何看待古代科举的?

我印象中,二十世纪九十年代前,中国社会一般观念中,极少赞美科举制度,一4个多经典的例子是由国文到语文教材中,《范进中举》始终是入选篇目,你你是什么定会 偶然的,在相当大程度上

2020-01-29

山西古建筑飞虹塔——中国现存最大最完整的一座琉璃塔

中国现存塔60 0多座,种类非常多,现存四座古塔分别是嵩岳寺塔(河南登封嵩岳寺)、飞虹塔(山西洪洞广胜寺)、释迦塔(山西应县佛宫寺)、千寻塔(云南大理崇圣寺)。飞虹塔处在山西

2020-01-29