拥有自己的博客还是一件很开心的事情,哪怕没有什么人来看。也是对自己成长的记录。来说说如何搭建吧。
首先你需要了解 GitHub 仓库托管 和 GitHub Pages 的相关内容
- 不需要买服务器部署搭建环境等等
- 不需要购买域名和备案
- 很快的上手
原理
Jekyll 是一个简单的博客形态的静态站点生产机器。它有一个模版目录,其中包含原始文本格式的文档,通过 Markdown (或者 Textile) 以及 Liquid 转化成一个完整的可发布的静态网站,你可以发布在任何你喜爱的服务器上。Jekyll 也可以运行在 GitHub Pages 上。接下在自己的电脑搭建一个测试环境吧 😎😎😎
安装 jekyll
需要本机的环境 Git 环境(用于部署到远端)、Ruby 环境(Jekyll 是基于 Ruby 开发的)、包管理器 RubyGems
由于我是MacOS系统所以就不需要了 需要安装Xcode 和 命令行工具就行了
xcode-select --install
推荐一个git管理项目的工具 可能需要登录账户注册 所以 翻出去吧 = =
环境都已经具备后安装
gem install jekyll
创建你的博客所在文件夹
jekyll new myBlog
进入博客文件夹的目录
cd yourBlogFolder
启动jekyll服务
jekyll server
或者
jekyll serve
在 Chrome 浏览器 输入 http://127.0.0.1:4000
安装完成了。
配置jekyll
jekyll是通过目录下面的 _config.yml
配置的
jekyll 文档
你下载主题后 进入到文件夹 先安装一下 bundler
命令
gem install bundler
Fetching: bundler-1.13.5.gem (100%)
Successfully installed bundler-1.13.5
Parsing documentation for bundler-1.13.5
Installing ri documentation for bundler-1.13.5
Done installing documentation for bundler after 5 seconds
1 gem installed
不然会报错
/Users/lxc/.rvm/rubies/ruby-2.2.2/lib/ruby/site_ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:in `require': cannot load such file -- bundler (LoadError)
from /Users/xxxxxxxx/.rvm/rubies/ruby-2.2.2/lib/ruby/site_ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:in `require'
from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/gems/jekyll-3.3.0/lib/jekyll/plugin_manager.rb:34:in `require_from_bundler'
from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/gems/jekyll-3.3.0/exe/jekyll:9:in `<top (required)>'
from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/bin/jekyll:23:in `load'
from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/bin/jekyll:23:in `<main>'
from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/bin/ruby_executable_hooks:15:in `eval'
from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/bin/ruby_executable_hooks:15:in `<main>'
然后执行 之前记得修改 gem
的镜像源
bundle install
更新 gem
$ gem update --system # 这里请翻墙一下
$ gem -v
2.6.3
$ gem sources --add https://gems.ruby-china.org/ --remove https://rubygems.org/
$ gem sources -l
https://gems.ruby-china.org
# 确保只有 gems.ruby-china.org
$ bundle config mirror.https://rubygems.org https://gems.ruby-china.org
然后如果报错 缺少什么安装什么包就行了
例如
gem install jekyll-paginate
gem install jekyll-sitemap
最后
Configuration file: /data/static/img/yourBlog/_config.yml
Configuration file: /data/static/img/yourBlog/_config.yml
Source: /data/static/img/yourBlog
Destination: /data/static/img/yourBlog/_site
Incremental build: disabled. Enable with --incremental
Generating...
done in 0.475 seconds.
Auto-regeneration: enabled for '/data/static/img/yourBlog'
Configuration file: /data/static/img/yourBlog/_config.yml
Server address: http://127.0.0.1:4000/
Server running... press ctrl-c to stop.
打开浏览器输入 http://127.0.0.1:4000/ 就OK啦
加入第三方的社会化工具
Disqus 已经被墙了 So 用国内的吧 多说就挺好的
把多说代码片段复制到 _layouts
文件夹下 post.html
文件内的 </article>
和 </div>
标签之间即可
加入统计之类的代码
Google Analytics
用google的需要改hosts 上面有提到方法
选择一个
复制到 _layouts
文件夹下 default.html
文件内的 </body>
标签之上即可。 当然也可以在 _config.yml
配置
申请自己的域名
这一步之前得将你本地博客所以文件通过 GitHub Desktop 提交到你的GITHub Pages仓库
由于 GitHub Pages
时常不能访问 原因是 TC的大炮攻击Github所致 所以最好自己添加一个 CNAME
那么问题来了域名从哪里来呢。 So… Come on!
戳这里
可以申请 免费域名只有 [.tk .ml .ga .cf .gq]
点击 选择一个 第一个已经有人用了 那就是我 = =
然后 checkout
选择时间
填写信息
点击 My Domains
看你的域名列表
成功了~
添加CNAME文件
在你的github pages项目根目录上新建一个CNAME文件,在CNAME文件上编辑刚才申请到的域名,比如 yoruo.tk ,那么我就写上 yoruo.tk (推荐),当然你也可以写 www.yoruo.tk ,两种写法处理方式不同:
- 如果你写的是 yoruo.tk ,那么 www.yoruo.tk 就会指向 yoruo.tk
- 如果你写的是 www.yoruo.tk k ,那么 yoruo.tk 就会指向 www.yoruo.tk
注意,两种写法都不需要在前面加 http 。
引用这篇 文章
在DNSPod添加A记录
-
然后进入管理中心,选择添加域名。
-
为域名添加记录,这里的NS记录是自动生成,不用修改,因为我们需要我们的网站可以通过 yoruo.tk 和 www.yoruo.tk 都能访问,所以需要添加两组A记录。
为什么 192.30.252.153
和 192.30.252.154
,因为这是github pages官网说的咯。网上有些人说A记录是 ping xxx.github.io 之后的IP地址,这些都是不可信的。
但是你可能会奇怪,每个人都是这两个IP地址的话,那么Github怎么知道我的域名 yoruo.tk 和 www.yoruo.tk 对应的是 lxcsjk.github.io 而不是其他人的github pages呢?答案就在上一步操作中的CNAME文件,这里指定了其所对应的域名,github会自动处理,将两者对应起来。
另外,如果你添加CNAME记录把域名指向 xxx.github.io 的话,也会成功(网上某些教程就是这么做的)。但是官方是不推荐最终做法的,因为可能会”导致其他服务出现问题”。
引用这篇 文章
修改域名的DNS
然后
填上 DNSPod 的DNS地址 等待DNS服务器刷新 应该很快 我当时几分钟就好了
然后打开你的博客 开始书写所见所想吧。