YoRuo:想变得更好

爱折腾 - 乐于折腾 - 享受折腾

欢迎来到我的Blog~


我的博客是如何搭建的

拥有自己的博客还是一件很开心的事情,哪怕没有什么人来看。也是对自己成长的记录。来说说如何搭建吧。

首先你需要了解 GitHub 仓库托管 和 GitHub Pages 的相关内容

  1. 不需要买服务器部署搭建环境等等
  2. 不需要购买域名和备案
  3. 很快的上手

原理

Jekyll 是一个简单的博客形态的静态站点生产机器。它有一个模版目录,其中包含原始文本格式的文档,通过 Markdown (或者 Textile) 以及 Liquid 转化成一个完整的可发布的静态网站,你可以发布在任何你喜爱的服务器上。Jekyll 也可以运行在 GitHub Pages 上。接下在自己的电脑搭建一个测试环境吧 😎😎😎


安装 jekyll

需要本机的环境 Git 环境(用于部署到远端)、Ruby 环境(Jekyll 是基于 Ruby 开发的)、包管理器 RubyGems

由于我是MacOS系统所以就不需要了 需要安装Xcode 和 命令行工具就行了

xcode-select --install 

安装Ruby

推荐一个git管理项目的工具 可能需要登录账户注册 所以 翻出去吧 = =

不用翻墙访问Google等等 修改hosts的方法

SourceTree

环境都已经具备后安装

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 文档

我博客主题 fork 是 这位大神潘柏信仓库

你下载主题后 进入到文件夹 先安装一下 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服务器刷新 应该很快 我当时几分钟就好了

然后打开你的博客 开始书写所见所想吧。

打赏一个呗

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦