github_html/css_WEB-ITnose で独自のブログを構築する方法

暇なときに github で自分のブログを構築しようとしましたが、紆余曲折を経て、ようやくプロトタイプを構築することができました。ここで、github で独自のブログを構築するプロセス全体をまとめます。

注: この記事は完全にオリジナルではありません。私も自分のブログを作成していたときに、オンラインで多くの情報をチェックしましたが、オンラインで見つけた情報には多かれ少なかれ不足していました。そこで、この資料をまとめて、構築プロセス中に遭遇した問題とその解決方法を共有します。

さらに、github 上に独自のブログを構築する方法は 1 つだけではなく、私が統合したものはそのうちの 1 つにすぎません。

1. プロジェクトを作成します

まず、ランダムな名前で GitHub 上にプロジェクトを作成し、後で発生する可能性のある URL の競合を避けるためにすべて小文字を使用するようにしてください。

1.1 Github の右上隅にある + ボタンをクリックし、表示されるメニューで [新しいリポジトリ] を選択します

1.2 ウェアハウスの作成ページに入り、ウェアハウスの名前と説明を入力し、リポジトリの作成ボタンをクリックします倉庫を作成します

プロジェクトが作成されます。

2. Git をインストールします

Git は、速度を重視した無料の分散バージョン管理ツール、またはソース コード管理ツールです。

git インストール アドレス (http://msysgit.github.io/)

git の具体的なインストール手順については、http://jingyan.baidu.com/article/90895e0fb3495f64ed6b0b50.html を参照してください

git について一般的なコマンドについては、http://www.bootcss.com/p/git-guide/を参照してください。

3.clone project

Git をローカルで実行し、任意のディレクトリを選択して、作成したプロジェクトのクローンを作成します。

例:

cd /e/bloggit clone https://github.com/stxwd46/EX.github-io.gitcd EX.github-io

4. 構成ファイル _config.yml を作成します

注: 後で作成されるすべてのドキュメントは、UTF-8 BOM フリー (隠し文字) エンコーディングを使用して のルート ディレクトリに保存する必要があります。プロジェクト git コマンド ライン インターフェイスを開き、コマンド >> を入力して新しいファイル _config.yml を作成し、baseurl: /blogdemo を入力します。blogdemo はプロジェクト名です。この行の内容は、プロジェクトのルート パスを指定します。ウェブサイト全体。

例:

baseurl: /EX.github-io

ディレクトリ構造は次のようになります

/EX.github-io    |--　_config.yml

5. ホームページを作成します

次の内容の新しいファイルindex.htmlをルートディレクトリに作成します:

---title: Hello, My Blog---{{ page.title }}

それぞれいくつかのメタデータを設定するための yaml ファイル ヘッダーがあります。 3 つのダッシュ「---」を使用して開始と終了をマークし、その中の各行が一種のメタデータを設定します。 「title: Hello, My Blog」は、記事のタイトルが「Hello, My Blog」であることを意味します。この値が設定されていない場合は、ファイル名に埋め込まれたタイトル、つまり「hello world」が使用されます。 。

yaml ファイルのヘッダーの後ろに、記事の公式コンテンツがあります。{{}} これらは、Liquid テンプレート言語です。{{}} では、テンプレート変数を使用できます。 {{ page.title }} は、先ほどタイトルを Hello, My Blog に設定したため、「このページのタイトル」を意味します。したがって、ブログのホームページに入ると、タイトルに対応するコピーが表示されます。

ディレクトリ構造は次のようになります:

/EX.github-io    |--　_config.yml    |--   index.html

6. _posts に記事を書いて、記事リストをホームページに追加します

ホームページができたので、ブログ投稿を投稿するにはどうすればよいでしょうか?

プロジェクトのルート ディレクトリに戻り、git bash を開き、mkdir _posts を実行して新しいディレクトリを作成します。名前を見れば、すべての記事がここに保存されることがわかります。

_posts ディレクトリに入り、新しい記事を作成します。デフォルトのファイル名の形式は年-月-日-postTitle であることに注意してください。たとえば、2015-05-05-my_first_article.md では、このファイル名が URL 生成の基礎として使用されるため、スペースやその他のランダムな文字は避けてください。ファイル名の形式は、_config.yml のパーマリンク属性を変更することで変更できます。デフォルト値は、作成したファイルの内容です。具体的なルールはここで確認できます。

今作成したファイルのサフィックスが .md であることに気付いた場合は、GitHub や StackOverFlow に詳しい友人なら Markdown 形式を知っているはずです。フロントエンドに慣れていない人は、マークダウンを使用すると HTML を回避し、代わりにより直感的なマークダウン構文を使用できます。 Markdown 構文に詳しくなくても、この Markdown 構文の説明を参照してください。慣れると非常に簡単に習得できます。フロントエンド開発者として、私は今でも HTML を使用することを好みます。

トピックに戻り、作成したばかりのファイルを開いて、次の内容を入力します:

---title: 我的第一篇文章---# {{ page.title }}## 目录+ [第一部分](#partI)+ [第二部分](#partII)+ [第三部分](#partIII)----------------------------------## 第一部分

这里是第一部分的内容----------------------------------## 第二部分

这里是第二部分的内容----------------------------------## 第三部分

这里是第三部分的内容{{ page.date|date_to_string }}

这段内容中使用了最常用的几种Markdown语法，比如使用 # ，## 表示 HTML 中的 4a249f0d628e2318394fd9b75b4636b1473f0a7621bec819994bb5020d29372a , c1a436a314ed609750bd7c7d319db4da2e9b454fa8428549ca2e64dfac4625cd。使用[text](link)创建超链接，使用 连续多个 - 创建水平线（注意：不包括最上端包围title所使用的横线，那里表示一个页面的“头属性”），等等。更多详细的语法可以在之前提到的页面查询，这里不再赘述，总之，这是一种更加贴近真实写作的语法，推荐大家尝试。

页面最后面的那个 {{ page.date|date_to_string }} 是指显示本页的日期属性，并且转换为可读的字符串形式。同样也是Liquid语法。

OK，第一篇文章就写好了，然后到主页给文章加上入口链接。

打开我们的 index.html 文件，添加内容，变成下面这样：

---title: My Blog---{{ page.title }}{% for post in site.posts %}{{ post.date|date_to_string }} <a href='{{ site.baseurl }}{{ post.url }}'>{{ post.title }}</a>{% endfor %}

简单解释一下，Liquid标记最主要分为两种，一种是直接输出变量内容，像这样：

{{ page.title }}

另一种则是逻辑命令形式的，像这样：

{% for x in y %} ... {% endfor %}

而刚才写进主页的内容，就是遍历所有post文件，然后逐一显示在页面上，这里需要注意的一点就是在创建文章的超链接时，除了 post.url 之外，也要注意在前面加上site.url ，原因前面也有提到过，我们正在创建的是 Project Pages 类型的网站，其最终生成的网址根目录是：username.github.com/projectname，而 post.url 生成的超链接仅仅会自动加上 username.github.com/ 这样的前缀。

现在检查一下更改的所有内容，确认不要犯下愚蠢的错误，比如把 “.” 打成 “。“或者单词拼错之类的。

目录结构变为

/EX.github-io    |--　_config.yml    |--   index.html    |--   _posts    |    |--　2015-05-05-my_first_article.md

7.配置SSH keys

为什么要配置ssh keys？因为github和本地代码做推送和拉取时，需要用到ssh的密钥对进行数据加解密，由于github上新建的项目没有添加密钥，所以本地仓库连接不到远程仓库。

那么如何配置ssh keys呢？

 

7.1 我们需要检查你电脑上现有的ssh key：

cd ~/.ssh

如果提示：No such file or directory 说明你是第一次使用git。

7.2 生成新的ssh keys：

ssh-keygen -t rsa -C "邮件地址@youremail.com"

注意1: 此处的邮箱地址，你可以输入自己的邮箱地址；注意2: 此处的「-C」的是大写的「C」。

按回车后出现

再按一次回车即可。

然后系统会要你输入密码：

Enter passphrase (empty for no passphrase):<输入加密串>Enter same passphrase again:<再次输入加密串>

在回车中会提示你输入一个密码，这个密码会在你提交项目时使用，如果为空的话提交项目时则不用输入。这个设置是防止别人往你的项目里提交内容。

注意：输入密码的时候没有*字样的，你直接输入就可以了。

最后看到这样的界面，就成功设置ssh key了：

7.3 添加ssh key到GitHub

在本机设置SSH Key之后，需要添加到GitHub上，以完成SSH链接的设置。

1、打开本地C:\Documents and Settings\Administrator.ssh\id_rsa.pub文件。此文件里面内容为刚才生成人密钥。如果看不到这个文件，你需要设置显示隐藏文件。准确的复制这个文件的内容，才能保证设置的成功。

2、登录你的GitHub个人主页。点击右上角的 Settings进入设置页面，然后点击SSH Keys页面中的Add SSH key按钮

3、把你本地生成的密钥复制到里面（key文本框中）， 点击 add key 就ok了

8.发布到GitHub

这个时候我们就可以把页面提交到github上了，到根目录打开git命令行界面

8.1 把刚创建的所有文件添加到本地git库

git add -A

8.2 保持良好的习惯，每次提交都提交添加描述

git commit -m "create my blog"

8.3 推送到GitHub，这里注意，因为我们使用的是GitHub Pages中的 Project Pages，GitHub规定，只有该分支中的页面，才会生成网页文件。即GitHub仅会将分支 gh-pages 下的内容进行自动生成操作， 所以本地的 master 分支应推送到远端的 gh-pages 分支

git push origin master:gh-pages

输入账号和密码，账号即你的GitHub账号(不是昵称，是账号名！)，输入密码的时候命令行界面不会有任何的变化，所以在输入密码的时候要谨慎小心。之后按回车即可。

好了，那现在我们要如何查看我们的博客页面呢。打开GitHub，进入到自己博客的仓库，右侧菜单栏有一个setting选项

点击进入之后会看到这个页面

GitHub Pages中显示的链接就是你的博客地址啦。

9.增加模板套装_layouts

其实到第8步博客的构建就已经完成了，只是没有样式的博客实在太难看。GitHub Pages有提供一些主题给我们使用。但作为一个前端开发者，肯定更希望自己给自己的博客布局和创建样式。

回到项目根目录，新建文件夹 _layouts，顾名思义，“布局”是也。在 _layouts 中新建一个最基本的布局文件，姑且命名为default.html好了：

<!DOCTYPE html><html>    <head>      <meta http-equiv="content-type" content="text/html; charset=utf-8" />      <title>{{ page.title }}</title>    </head>    <body>      {{ content }}    </body></html>

首先，charset=utf-8让我们一劳永逸地解决了UTF-8的编码问题，随后指定了正文内容的位置，当然在这里只是一个最简单的内容，在body内仅有一个 {{ content }} 标签，你可以根据自己的喜好对页面进行任何改动，只要记得保留这个内容标签在你想要的位置就好。

然后我们修改index.html和刚写完的那篇文章，只要在头属性上加一句就好：

---title: xxoolayout: default.html---

我们当然还可以把这个结构变得更灵活一些，比如继续新增两个模板分别叫做l_post.html与l_index.html，他们首先引用default.html，但在其基础上做出一定的修改。然后首页使用l_index模板，而所有的post文件则使用l_post模板，等等等等，请随意发挥。但始终记得加上 {{ content }} 标签

目录结构变为

/EX.github-io    |--　_config.yml    |--   index.html    |--   _posts    |    |--　2015-05-05-my_first_article.md    |--   _layouts    |    |--　default.html

再次推送到GitHub即可。

这样，我们就已经构建好了一个最简单的blog。之后你们就可以开始为自己的博客添砖加瓦了。

9.问题汇总

　　9.1 推送到GitHub之后个人主页的contributions没有提交记录

　　Git会根据用户的名字和邮箱来记录提交。GitHub也是用这些信息来做权限的处理，输入下面的代码进行个人信息的设置，把名称和邮箱替换成你自己的。

　　如何查看自己的名称和邮箱呢。回到GitHub个人主页，点击右上角的setting图标

　　

　　进入之后Personal settings菜单栏下的Profile页面中，Name即为你的名字

    

　　但邮箱不是Name下面的Public email，很多人在这里被误导了。邮箱是Emails页面中的邮箱地址

　

　　知道了名字和邮箱之后，打开git命令行界面，通过下面的命令行来设置你的名字和邮箱

git config --global user.name "cnfeat"//用户名git config --global user.email  "cnfeat@gmail.com"//填写自己的邮箱

　　设置正确之后，提交记录就都恢复了。不仅仅你以后提交的都会出现在提交记录中，你以前提交的也会恢复并出现在记录中。

　　9.1 每次提交都要求你输入账号跟密码

　　原因是我们在clone分支时使用了 HTTPS 的地址，

　　HTTPS 的地址是做什么用的呢？其实它主要是用在一些防火墙或者代理服务器设置比较严格的情况下的，比如有些公司是禁止使用 SSH 连接外网，那么在这种情况下要想使用 Git 的话，就只能用 HTTPS 的方式了。

　　使用 HTTPS 的方式，也有储存密码的方式，但我们首推的方式是切换到 SSH，如果你的网络环境支持的话。

　　回到你博客的根目录。打开git命令行界面，输入

git remote set-url 你博客的ssh url

　　如果你不知道你博客的ssh url，打开你的博客项目，右下角选择SSH，然后复制框里的url就行了

     

　　之后再提交就不会要求你输入账号密码了。

　　9.3 页面调试不方便

　　如果我们要给我们的博客布局或设置样式神马的，我们是否每次都要把代码写好然后推送到GitHub上，再打开自己的博客地址，看看布局有没有什么问题。如果有的话再改代码，再提交，再查看呢？

　　这样效率岂不是很低，有没有能够本地调试GitHub Pages上的页面的工具呢？

　　答案是肯定的。我用的是Jekyll。它的官网就有完整的教程，使用起来非常的简便。

10.参考资料

　　1.http://www.ruanyifeng.com/blog/2012/08/blogging_with_jekyll.html

　　2.

　　3.http://cnfeat.com/2014/05/10/2014-05-11-how-to-build-a-blog/

　　4.http://www.open-open.com/lib/view/open1366080269265.html