上一篇博文 《利用Hexo搭建個人博客-環境搭建篇》 中,我們講解了利用Hexo搭建個人博客應該要配置哪些環境。
相信大家已經迫不及待的想要知道接下來應該要怎么把自己的博客搭起來了,下面,讓我們一起見證這奇跡的時刻。
1 初始化博客
首先,我們需要按照下面的步驟進行博客的初始化:
1> 創建一個hexo-blog文件夾,當然你也可以命名為其他名字,這里以hexo-blog為例
$ mkdir hexo-blog
2> 執行以下命令,Hexo將會在目標文件夾下建立博客需要的所有文件
$ hexo init
這個時候終端會輸出
INFO Copying data to ~/Documents/workspace/git/hexo-blog INFO You are almost done! Don't forget to run 'npm install' before you start blogging with Hexo!
同時,hexo-blog目錄下會生成以下文件:
- scaffolds : 腳手架,用於存放我們創建文章時的模版
- source : 用於存放我們用markdown編寫的博文原文件、其他靜態資源文件
- themes : 用於存放主題,里面有我們博客的默認主題landscape
- _config.yml : Hexo和站點的配置文件,里面可以設置博客的名字、標題、作者、鏈接格式等相關項
3> 執行以下命令進行依賴包安裝
$ sudo npm install
執行成功后,hexo-blog目錄下將會增加一個模塊
- node_modules: 關聯保存了將會使用到的hexo依賴包
2 配置博客
當我們的博客初始化完成以后,接下來要做的就是對其進行個性化的配置了.
為了讓大家更好懂,下面我就以配置博客 小學徒的成長歷程
為例進行講解。
2.1 Hexo設置
這個其實就是博客根目錄下的 _config.yml
文件,主要是對Hexo的配置以及站點的相關配置,下面開始進行分段詳細的說明
1> 站點配置
1 # Site 2 title: 小學徒V的成長歷程 # 網站標題 3 subtitle: 挑戰人生無極限,攀登人生更高峰 # 網站子標題 4 description: 這是一個利用Hexo搭建的博客 # 網站描述 5 author: 小學徒V # 網站作者,也就是您的名字 6 language: zh-cn # 網站使用的語言 7 timezone: # 網站時區。Hexo 預設使用您電腦的時區。
2> 網址配置
這個地方一般根據情況修改 url
和 root
即可。
1 # URL 2 url: http://xiaoxuetu.github.io # 博客網址 3 root: / # 網站根目錄 4 permalink: :year/:month/:day/:title/ # 文章的永久鏈接格式 :year/:month/:day/:title/ 5 permalink_defaults: # 永久鏈接中各部分的默認值
注意! 如果你的網站存放在子目錄中,例如 http://xiaoxuetu.github.io/blog, 則將url設為http://xiaoxuetu.github.io/blog, 並且把 root 設為/blog/。
3> 目錄配置
這個地方一般直接取默認值不用修改。
1 # Directory 2 source_dir: source # 資源文件夾,這個文件夾用來存放內容,例如我們用markdown編寫的博文 3 public_dir: public # 公共文件夾,這個文件夾用於存放生成的靜態博客文件。 4 tag_dir: tags # 標簽文件夾 5 archive_dir: archives # 歸檔文件夾 6 category_dir: categories # 分類文件夾 7 code_dir: downloads/code # Include code 文件夾 8 i18n_dir: :lang # 國際化(i18n)文件夾 9 skip_render: # 跳過指定文件的渲染,您可使用 glob 來配置路徑。
4> 文章配置
這個地方一般直接取默認值不用修改。
1 # Writing 2 new_post_name: :title.md # 新文章的文件名稱 3 default_layout: post # 預設布局 4 titlecase: false # 把標題轉換為 titlecase(titlecase指的是將每個單詞首字母轉換成大寫) 5 external_link: true # 在新標簽中打開鏈接 6 filename_case: 0 # 把文件名稱轉換為 (1) 小寫或 (2) 大寫, 0表示不變 7 render_drafts: false # 顯示草稿 8 post_asset_folder: false # 啟動 Asset 文件夾 9 relative_link: false # 把鏈接改為與根目錄的相對位址 10 future: true # 顯示未來的文章 11 highlight: # 代碼塊的設置 12 enable: true 13 line_number: true # 是否顯示行號 14 auto_detect: true # 是否自動監測 15 tab_replace: # 將 tab 替換成其他字符串
5> 分類和標簽配置
這個地方一般直接取默認值不用修改。
1 # Category & Tag 2 default_category: uncategorized # 默認分類, uncategorized表示未分類 3 category_map: # 分類別名 4 tag_map: # 標簽別名
6> 日期 以及 時間格式 配置
Hexo 使用 Moment.js 來解析和現實時間,一般我們直接取默認值不用修改。
如果你想修改的話,可以按照 http://momentjs.com/docs/#/displaying/format/ 中定義的格式進行修改。
1 date_format: YYYY-MM-DD # 日期格式 2 time_format: HH:mm:ss # 時間格式
7> 分頁配置
這個地方一般根據自己的需求修改 per_page 設置每頁顯示的文章數量即可。
1 # Pagination 2 per_page: 10 # 每頁顯示的文章量,如果設置值為0,則表示禁止分野 3 pagination_dir: page # 分頁目錄
8> 主題配置
一般從這里開始,都是屬於Hexo拓展插件的配置了,下面這段是配置我們博客所要使用的主題名字,想要獲取更多的主題,可以參考:http://hexo.io/themes/
1 # Extensions 2 theme: landscape # 主題設置,默認是 landscape
9> 部署配置
這一塊涉及到博客發布,將在下一篇博文中統一進行講解,這里可以先不用修改配置
1 # Deployment 2 deploy: 3 type: # 設置發布類型,如git,rsync
2.2 主題設置
這個其實就是 themes/{主題名稱}/_config.yml 文件了,主要是網站主題的一些配置,如需要顯示的菜單、開啟的組件等等。
不同的主題,都會增加了自己的一些特別開關,下面只以默認主題為例進行講解。
1> 菜單配置
這里主要是對博客顯示的菜單項的訪問路徑進行配置,
1 # Header 2 menu: # 菜單項的相關配置 3 Home: / # 配置博客的主頁路徑 4 Archives: /archives # 配置博客的歸檔路徑 5 rss: /atom.xml # 配置博客的RSS訂閱路徑
2> 顯示內容配置
這里主要對博客顯示的內容進行設置,比如查看全文的按鈕文本顯示。
1 # Content 2 excerpt_link: 閱讀全文 # 設置查看全文的按鈕顯示文本 3 fancybox: true # 是否開啟彈出層效果
3> 側邊欄配置
主要是對側邊欄展現進行設置。
1 # Sidebar 2 sidebar: right # 側邊欄展示的方向 3 widgets: # 側邊欄添加的組件配置 4 - category # 顯示分類 5 - tag # 顯示標簽 6 - tagcloud # 顯示標簽雲 7 - archive # 顯示歸檔 8 - recent_posts # 顯示最近發布
4> 其他配置
第1點 和 第2點 都是大部分主題通用的配置,下面這些就是比較定制化的了。除了下面列出的,國內大部分主題都還會添加了百度統計的ID配置、多說的ID配置、Jiathis分享活着百度分享的配置等等。
具體我們依舊是只講解默認主題里面的。
1 # Miscellaneous 2 google_analytics: "UA-********-1" # 谷歌統計的ID配置,如果你沒有用到,可以為空 3 favicon: /favicon.png # 網站圖標路徑 4 twitter: # twitter配置 5 google_plus: # google plus 配置 6 fb_admins: # facebook 配置 7 fb_app_id:
至此,我們博客的 Hexo配置 和 主題配置 都完成了。
3 創建博文 - Hello Hexo
當我們的博客個性化配置完成后,我們一起來看下如何創建我們的第一篇博文-Hello Hexo.
1> 進入到博客的根目錄,執行以下命令生成新的博文
$ hexo new hello-hexo # 格式是: hexo new {文章名}
命令執行成功后,你就會發現在 source/_posts
目錄下多了一個文件 hello-hexo.md
。
前面我們已經說到,我們的博文使用markdown語法進行編寫的,后面的博文我會詳細的進行markdown語法的講解。
接下來,打開這個文件,我們可以看到以下內容:
1 title: hello-hexo 2 date: 2015-09-03 00:08:30 3 tags: 4 ---
他們的含義是:
- title : 文章的標題
- date : 該文章的創建時間
- tags : 該文章的標記tag
下面我們可以更改成
title: 你好,Hexo
date: 2015-09-03 00:08:30
tags:
- hexo
---
這是我的第一篇博客,你好,Hexo。
到這里,我們的第一篇博客編寫完畢。
4 瀏覽博客效果
經過了重重困難,我們終於配置好了我們的博客。深呼吸一口氣,讓我們一起來見證奇跡的時刻。
打開終端,在我們的hexo-blog目錄下執行以下命令
$ hexo s # 等同於 hexo server , s 其實就是 server的縮寫
執行成功后,控制台將會輸出
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
打開瀏覽器,我們可以看到我們用Hexo搭建好的使用默認主題的博客展現效果。
5 結束語
在這篇博客里,我們了解到了以下內容:
- 如何進行博客的配置
- 如何進行主題的配置
- 如何創建我們的第一篇博客
- 如何預覽我們的博客效果
在下一篇博客里,我們將會講解 “如何將我們的博客發布到github上”,敬請期待。