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

  • 时间:
  • 浏览:1
  • 来源:大发快三_快三手机客户端_大发快三手机客户端

上次村里人 留言说,技术博客是多多程序 员的标配,但据我所知绝大每项技术同学到现在仍然如此 我人及 的技术博客。是因为分析有什么都有,也有懒的写,也有怕写不好,还也一个 劲想憋个大招,幻想做到完美再发出来,结果一个 劲胎死腹中。但人太好更多多多程序 员是我不知道何如去搭建一个 多博客,人太好如今搭建一个 多我人及 技术博客非常简单,其中最简单搭建依据莫属使用 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
  • 每个月的流量不超过1150G
  • 每小时更新不超过 10 次

Github Pages 使用 Jekyll 来构建内容,如此 Jekyll 是哪有几个呢?

Jekyll 介绍

Jekyll 是一个 多简单的博客特性的静态站点生产机器。它一个 多模版目录,其中暗含原始文本格式的文档,通过一个 多转换器(如 Markdown)和我们歌词 歌词 的 Liquid 渲染器转化成一个 多完整版的可发布的静态网站,我能 发布在任何你喜爱的服务器上。Jekyll 也可不可否 运行在 GitHub Page 上,也要是我说,我能 使用 GitHub 的服务来搭建你的项目页面、博客将会网站,何如让是完整版免费的。

但将会我们歌词 歌词 要是我在 GitHub 后边使用语句,到不需用知道 Jekyll 的语法,一般 Github 会自动将我们歌词 歌词 写的 Markdown 文件转加进去静态页面。使用 Jekyll 需用使用 Markdown 语法来写你的文章,不过 Markdown 语法非常简单,做为多多程序 员来讲基本上两五六天就掌握了,我们歌词 歌词 也可不可否 参考这篇文章:markdown 使用总结。

给我们歌词 歌词 分享什么都有有 Jekyll 主题,什么都有有网站下有什么都有 http://jekyllthemes.org/ 主题,我们歌词 歌词 可不可否 根据我人及 的爱好去选用博客主题。

我的我人及 博客

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

  • 千里追踪博客之殇
  • 历时2五六天,我的博客(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 博客

一般同学到后边什么都有有步也就完成了,基本满足了 150% 技术同学的需求。但还是有什么都有有同学们有更高的追求,比如说使用 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/

自动化部署

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

配置 Webhook

在开发过程中的 Webhook,是四种 通过通常的 callback,去增加将会改变 Web page将会 Web app 行为的依据。哪有几个 Callback 可不可否 由第三方用户和开发者维持当前,修改,管理,而哪有几个使用者与网站将会应用的原始开发如此 关联。Webhook 什么都有有词是由 Jeff Lindsay 在 1507 年在计算机科学 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(1506)//监听的端口
 
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:1506/deploy;
}

原来 我们歌词 歌词 整个自动化部署就完了,每次提交代码时,Github 会发送 Webhook 给地址http://www.ityouknow.com/deploy,Nginx 将 /deploy 地址转发给 Nodejs 端口为 31506 的服务,最后通过 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好友好友后有完善功能的,也请帮忙留意,共同把什么都有有博客完善的更好。

最后,我们歌词 歌词 可不可否 在这篇文章下留下你的我人及 博客地址,方便同行们观赏、交流、学习。