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

  • 时间:
  • 浏览:1
  • 来源:幸运快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
  • 每个月的流量不超过5000G
  • 每小时更新不超过 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 来构建;第三个小阶段,将博客托管于国外的有另三个小 服务商;第有另三个小 阶段,服务器迁移回到国内、域名备案。以前也写过几篇关于技术博客的文章,如下:

  • 千里追踪博客之殇
  • 历时2三7天 ,我的博客(www.ityouknow.com)终于又活了过来
  • 技术博客那先 事儿

使用 Github Pages + Jekyll 构建有另三个小 技术博客很简单,基本上步骤却说网上找有另三个小 我每各人喜欢的主题,直接 Fork 到我每各人的 Github ,或者在删掉原博客中的内容,在上传我每各人的文章即可,以我我每各人的博客为例。

我的博客最初使用的是Yummy-Jekyll,但你这一 主题是愿因 尽两年多都没办法 更新了。或者后期我在你这一 主题的基础上做了其他改动,其中有 依赖组件的更新,结合我每各人情况报告对个别页面进行了改版,就成为了现在的样子:

使用你这一 主题的愿因 是,我比较喜欢简洁大气的风格,或者此博客主题对代码展示支持良好。

快速构建有另三个小 博客

以我的博客为例,介绍怎样才能最快搭建有另三个小 博客。这也是我博客经历的第有另三个小 阶段。

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

过上一分钟,你的 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 博客

一般同学到里边你这一 步也就完成了,基本满足了 500% 技术同学的需求。但还是有其他同学们有更高的追求,比如说使用 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 在 5007 年在计算机科学 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(5006)//监听的端口
 
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:5006/deploy;
}

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

以前只都要亲戚亲戚我们都歌词 提交代码到 Github ,就会自动触发博客的自动化部署。

是愿因 会总爱总爱出现的问题图片图片

有其他小伙伴反馈在群克隆博客的以前总爱总爱出现了其他问题图片图片,在这里集中回复一下。

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

这是却说读者反馈的第有另三个小 问题图片图片,是愿因 我的博客 css 和 图片是放进 另外有另三个小 域名下的:www.itmind.net ,或者这块亲戚亲戚我们都歌词 群克隆过去都要改成本地的。

主要涉及的文件 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、博客

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

最后,亲戚亲戚我们都歌词 都都要在这篇文章下留下你的我每各人博客地址,方便同行们观赏、交流、学习。