Hexo+github搭建个人博客-博客初始化篇
文章推薦
- 精選java等全套學(xué)習(xí)資源
- 精選java電子圖書資源
- 精選大數(shù)據(jù)學(xué)習(xí)資源
- java項(xiàng)目練習(xí)精選
###一、初始化博客
首先,我們需要按照下面的步驟進(jìn)行博客的初始化:
1) 創(chuàng)建一個(gè)myblog文件夾,當(dāng)然你也可以命名為其他名字,這里以myblog為例
$ mkdir myblog2) 執(zhí)行以下命令,Hexo將會(huì)在目標(biāo)文件夾下建立博客需要的所有文件
$ hexo init這個(gè)時(shí)候終端會(huì)輸出
INFO Copying data to ~/Documents/workspace/git/myblog INFO You are almost done! Don't forget to run 'npm install' before you start blogging with Hexo!同時(shí),hexo-blog目錄下會(huì)生成以下文件:
- scaffolds : 腳手架,用于存放我們創(chuàng)建文章時(shí)的模版
- source : 用于存放我們用markdown編寫的博文原文件、其他靜態(tài)資源文件
- themes : 用于存放主題,里面有我們博客的默認(rèn)主題landscape
- _config.yml : Hexo和站點(diǎn)的配置文件,里面可以設(shè)置博客的名字、標(biāo)題、作者、鏈接格式等相關(guān)項(xiàng)
3) 執(zhí)行以下命令進(jìn)行依賴包安裝
$ sudo npm install執(zhí)行成功后,hexo-blog目錄下將會(huì)增加一個(gè)模塊
node_modules: 關(guān)聯(lián)保存了將會(huì)使用到的hexo依賴包###二、配置博客
當(dāng)我們的博客初始化完成以后,接下來要做的就是對(duì)其進(jìn)行個(gè)性化的配置了.
為了讓大家更好懂,下面我就以配置博客 小學(xué)徒的成長(zhǎng)歷程 為例進(jìn)行講解。
##2.1 Hexo設(shè)置
這個(gè)其實(shí)就是博客根目錄下的 _config.yml 文件,主要是對(duì)Hexo的配置以及站點(diǎn)的相關(guān)配置,下面開始進(jìn)行分段詳細(xì)的說明
1) 站點(diǎn)配置
1 # Site 2 title: cy的美好生活 # 網(wǎng)站標(biāo)題 3 subtitle: life is beautiful like sunshine! # 網(wǎng)站子標(biāo)題 4 description: 這是一個(gè)利用Hexo搭建的博客 # 網(wǎng)站描述 5 author: sihai # 網(wǎng)站作者,也就是您的名字 6 language: zh-CN # 網(wǎng)站使用的語言,這需要注意:看你的主題文件下的language包下有什么語言包就些什么。后面詳細(xì)說明! 7 timezone: # 網(wǎng)站時(shí)區(qū)。Hexo 預(yù)設(shè)使用您電腦的時(shí)區(qū)。2) 網(wǎng)址配置
這個(gè)地方一般根據(jù)情況修改 url 和 root 即可。
# URLurl: http://xiaoxuetu.github.io # 博客網(wǎng)址root: / # 網(wǎng)站根目錄permalink: :year/:month/:day/:title/ # 文章的永久鏈接格式 :year/:month/:day/:title/permalink_defaults: # 永久鏈接中各部分的默認(rèn)值注意: 如果你的網(wǎng)站存放在子目錄中,例如 http:// ouyangsihai.github.io/blog, 則將url設(shè)為http:// ouyangsihai.github.io/blog, 并且把 root 設(shè)為/blog/。
3) 目錄配置
這個(gè)地方一般直接取默認(rèn)值不用修改。
4) 文章配置
這個(gè)地方一般直接取默認(rèn)值不用修改。
# Writing new_post_name: :title.md # 新文章的文件名稱 default_layout: post # 預(yù)設(shè)布局 titlecase: false # 把標(biāo)題轉(zhuǎn)換為 titlecase(titlecase指的是將每個(gè)單詞首字母轉(zhuǎn)換成大寫) external_link: true # 在新標(biāo)簽中打開鏈接 filename_case: 0 # 把文件名稱轉(zhuǎn)換為 (1) 小寫或 (2) 大寫, 0表示不變 render_drafts: false # 顯示草稿 post_asset_folder: false # 啟動(dòng) Asset 文件夾 relative_link: false # 把鏈接改為與根目錄的相對(duì)位址 future: true # 顯示未來的文章 highlight: # 代碼塊的設(shè)置enable: true line_number: true # 是否顯示行號(hào)auto_detect: true # 是否自動(dòng)監(jiān)測(cè)tab_replace: # 將 tab 替換成其他字符串5) 分類和標(biāo)簽配置
這個(gè)地方一般直接取默認(rèn)值不用修改。
# Category & Tagdefault_category: uncategorized # 默認(rèn)分類, uncategorized表示未分類category_map: # 分類別名tag_map: # 標(biāo)簽別名6) 日期 以及 時(shí)間格式 配置
Hexo 使用 Moment.js 來解析和現(xiàn)實(shí)時(shí)間,一般我們直接取默認(rèn)值不用修改。
如果你想修改的話,可以按照 http://momentjs.com/docs/#/displaying/format/ 中定義的格式進(jìn)行修改。
7) 分頁配置
這個(gè)地方一般根據(jù)自己的需求修改 per_page 設(shè)置每頁顯示的文章數(shù)量即可。
# Paginationper_page: 10 # 每頁顯示的文章量,如果設(shè)置值為0,則表示禁止分野pagination_dir: page # 分頁目錄8) 主題配置
一般從這里開始,都是屬于Hexo拓展插件的配置了,下面這段是配置我們博客所要使用的主題名字,想要獲取更多的主題,可以參考:http://hexo.io/themes/
# Extensionstheme: landscape # 主題設(shè)置,默認(rèn)是 landscape9) 部署配置
這一塊涉及到博客發(fā)布,將在下一篇博文中統(tǒng)一進(jìn)行講解,這里可以先不用修改配置
# Deploymentdeploy:type: # 設(shè)置發(fā)布類型,如git,rsync##2.2 主題設(shè)置
這個(gè)其實(shí)就是 themes/{主題名稱}/_config.yml 文件了,主要是網(wǎng)站主題的一些配置,如需要顯示的菜單、開啟的組件等等。
不同的主題,都會(huì)增加了自己的一些特別開關(guān),下面只以默認(rèn)主題為例進(jìn)行講解。
1) 菜單配置
這里主要是對(duì)博客顯示的菜單項(xiàng)的訪問路徑進(jìn)行配置,
menu:home: / || home #首頁categories: /categories/ || th #分類archives: /archives/ || archive #歸檔tags: /tags/ || tags #標(biāo)簽about: /about/ || user #關(guān)于#schedule: /schedule/ || calendar#sitemap: /sitemap.xml || sitemap#commonweal: /404/ || heartbeat2) 顯示內(nèi)容配置
這里主要對(duì)博客顯示的內(nèi)容進(jìn)行設(shè)置,比如查看全文的按鈕文本顯示。
# Contentexcerpt_link: 閱讀全文 # 設(shè)置查看全文的按鈕顯示文本fancybox: true # 是否開啟彈出層效果3) 側(cè)邊欄配置
主要是對(duì)側(cè)邊欄展現(xiàn)進(jìn)行設(shè)置。
# Sidebar sidebar: right # 側(cè)邊欄展示的方向 widgets: # 側(cè)邊欄添加的組件配置 - category # 顯示分類 - tag # 顯示標(biāo)簽 - tagcloud # 顯示標(biāo)簽云 - archive # 顯示歸檔 - recent_posts # 顯示最近發(fā)布4) 其他
第1點(diǎn) 和 第2點(diǎn) 都是大部分主題通用的配置,下面這些就是比較定制化的了。除了下面列出的,國(guó)內(nèi)大部分主題都還會(huì)添加了百度統(tǒng)計(jì)的ID配置、多說的ID配置、Jiathis分享活著百度分享的配置等等。
具體我們依舊是只講解默認(rèn)主題里面的。
# Miscellaneous google_analytics: "UA-********-1" # 谷歌統(tǒng)計(jì)的ID配置,如果你沒有用到,可以為空 favicon: /favicon.png # 網(wǎng)站圖標(biāo)路徑 twitter: # twitter配置 google_plus: # google plus 配置 fb_admins: # facebook 配置 fb_app_id:至此,我們博客的 Hexo配置 和 主題配置 都完成了。
###三、創(chuàng)建博文 - Hello Hexo
當(dāng)我們的博客個(gè)性化配置完成后,我們一起來看下如何創(chuàng)建我們的第一篇博文-Hello Hexo.
1) 進(jìn)入到博客的根目錄,執(zhí)行以下命令生成新的博文
$ hexo new hello-hexo # 格式是: hexo new {文章名}命令執(zhí)行成功后,你就會(huì)發(fā)現(xiàn)在 source/_posts 目錄下多了一個(gè)文件 hello-hexo.md 。
前面我們已經(jīng)說到,我們的博文使用markdown語法進(jìn)行編寫的,后面的博文我會(huì)詳細(xì)的進(jìn)行markdown語法的講解。
接下來,打開這個(gè)文件,我們可以看到以下內(nèi)容:
他們的含義是:
- title : 文章的標(biāo)題
- date : 該文章的創(chuàng)建時(shí)間
- tags : 該文章的標(biāo)記tag
下面我們可以更改成
title: 你好,Hexo date: 2015-09-03 00:08:30 tags: - hexo ---這是我的第一篇博客,你好,Hexo。到這里,我們的第一篇博客編寫完畢。
###四、瀏覽博客效果
經(jīng)過了重重困難,我們終于配置好了我們的博客。深呼吸一口氣,讓我們一起來見證奇跡的時(shí)刻。
打開終端,在我們的myblog目錄下執(zhí)行以下命令
$ hexo s # 等同于 hexo server , s 其實(shí)就是 server的縮寫執(zhí)行成功后,控制臺(tái)將會(huì)輸出
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.打開瀏覽器,我們可以看到我們用Hexo搭建好的使用默認(rèn)主題的博客展現(xiàn)效果。
下面是我的next主題的博客,目前是默認(rèn)主題,后面的博客將介紹如何更換主題:
###五、 結(jié)束語
在這篇博客里,我們了解到了以下內(nèi)容:
- 如何進(jìn)行博客的配置
- 如何進(jìn)行主題的配置
- 如何創(chuàng)建我們的第一篇博客
- 如何預(yù)覽我們的博客效果
文章有不當(dāng)之處,歡迎指正,你也可以關(guān)注我的微信公眾號(hào):好好學(xué)java,獲取優(yōu)質(zhì)資源。
總結(jié)
以上是生活随笔為你收集整理的Hexo+github搭建个人博客-博客初始化篇的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Hexo+github搭建个人博客-环境
- 下一篇: 如何生成安全的密码 Hash:MD5,