建立独立博客第一步

前言

很多人都想自建一个博客,在上面写写文章,分享一点东西,但是又不想为此购买服务器,写前端页面,那么有没有一个两全的解决方案呢?答案就是github pages

快速入门

  1. 在GitHub创建一个新的仓库,并以 username.github.io 的格式命名,username是你的GitHub账户名
  2. 在仓库根目录下创建index.html文件
  3. 访问https://username.github.io

自定义域名访问

如果不想以username.github.io的域名访问,想自定义域名访问,那么可以这样做

  1. 目前github pages支持顶级域名二级域名访问
  2. 在新建的blog仓库根目录下创建CNAME文件,文件内容写入自定义域名
  3. 去dns运营商绑定域名到ip(域名到域名)的解析

接入jekyll使你的博客更美观

jekyll是一个静态网页生成工具,可以配合github pages使用是你的blog更美观

github给出的官方使用jekyll主题文档 →

jekyll给出的官方使用文档 →

  1. 打开cmd命令窗口,输入-gem install jekyll bundler 安装jekyll 此处输入图片的描述

  2. 输入-jekyll -v 验证是否安装成功

  3. 输入-jekyll new jekyll-website,即可看见初始化新建的一个jekyll模板,这个就是jekyll最基本的一个结构

  4. 打开Gemfile文件我们可以看到gem的一个源地址设置(source “https://rubygems.org”),如果访问不通,可以使用修改为https://gems.ruby-china.org/

  5. 因为新建模板是自定义minina的,我们可以选择其他模板,比如笔者选择了名为[Cayman Blog]的模板(网上有很多模板,请自行查找),

  6. 访问https://rubygems.org gem源地址 搜索cayman(注意:如果要使用jekyll本地构建须在源地址中找得到该gem才行)

  7. 拷贝GEMFILE:里面的指令覆盖本地gemfile文件主题项 修改_config.yml文件中主题 theme: jekyll-theme-cayman 拷贝安装:里面指令到cmd命令窗口执行 clone gihub的模板文件内容 此处输入图片的描述 此处输入图片的描述

  8. 进入待生成的blog目录下,cmd窗口执行 jekyll build,会发现生成了一个_site文件夹

  9. cmd窗口执行 jekyll serve指令,浏览器访问localhost:4000 大功告成!!

一个基本的jekyll的静态网站目录结构如下

  • _config.yml
  • _drafts
    • ├── begin-with-the-crazy-ideas.textile
    • └── on-simplicity-in-technology.markdown
  • _includes
    • ├── footer.html
    • └── header.html
  • _layouts
    • ├── default.html
    • └── post.html
  • _posts
    • ├── 2007-10-29-why-every-programmer-should-play-nethack.textile
    • └── 2009-04-26-barcamp-boston-4-roundup.textile
  • _data
    • └── members.yml
  • _site
  • index.html

每个目录解释如下 _config.yml 保存配置数据。很多配置选项都会直接从命令行中进行设置,但是如果你把那些配置写在这儿,你就不用非要去记住那些命令了。

_drafts drafts 是未发布的文章。这些文件的格式中都没有 title.MARKUP 数据。学习如何使用 drafts.

_layouts layouts 是包裹在文章外部的模板。布局可以在YAML头信息中根据不同文章进行选择。

_posts 这里放的就是你的文章了。文件格式很重要,必须要符合: YEAR-MONTH-DAY-title.MARKUP。 The permalinks 可以在文章中自己定制,但是数据和标记语言都是根据文件名来确定的。

_site 一旦 Jekyll 完成转换,就会将生成的页面放在这里(默认)。最好将这个目录放进你的 .gitignore 文件中。 index.html and other HTML,Markdown,Textilefiles如果这些文件中包含YAML头信息部分,Jekyll就会自动将它们进行转换。当然,其他的如.html,.markdown,.md,或者.textile等在你的站点根目录下或者不是以上提到的目录中的文件也会被转换。

Other Files/Folders 其他一些未被提及的目录和文件如 css 还有 images 文件夹, favicon.ico 等文件都将被完全拷贝到生成的 site 中。