如何用 windows+github搭建一個優美的hexo博客

時間 2020-05-25

標籤如何 windows+github windows github 搭建一個優美 hexo 博客欄目 Windows 简体版

原文原文鏈接

1.Hexo簡單介紹

Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown（或其餘渲染引擎）解析文章，在幾秒內，便可利用靚麗的主題生成靜態網頁。javascript

風通常的速度
Hexo基於Node.js，支持多進程，幾百篇文章也能夠秒生成。
流暢的撰寫
支持GitHub Flavored Markdown和全部Octopress的插件。
擴展性
Hexo支持EJS、Swig和Stylus。經過插件支持Haml、Jade和Less.

總之有個動態背景圖啥特別好管理也很是的優美

展現地址:
Hexo演示地址html

2.Hexo安裝

2.1 安裝準備與環境

Node.js
Git

Git是爲了方便管理代碼啊 github for windows也能夠java

2.2 本地搭建

配置github倉庫

登錄你的github帳號
建立你的github庫，注意命名規則：

你取的名字.github.io ``` ![](https://i.imgur.com/rMEbZEj.png) ![](https://i.imgur.com/WZj998M.png) 2. 而後克隆到本地 地址以下 ![](https://i.imgur.com/WYGNGS3.png) 在你想要放置倉庫的文件 點擊右鍵 git bash here 前提是安裝好了git 或者使用github for windows也行 ```javascript git clone 你的倉庫地址 ``` ![](https://i.imgur.com/Aqh3u96.png) #### 安裝初始化Hexo 3. 安裝Hexo 在剛clone完的git bash界面輸入命令<br> ```javascript npm install -g hexo ``` <br> cmd也行 安裝完畢 輸入命令 ```javascript hexo version ``` 查看安裝是否成功 ![](https://i.imgur.com/duEUaYV.png) 4. 初始化 Hexo 輸入命令 <br> ```javascript hexo init ``` 初始化 完成hexo的建立 5. 安裝hexo相關插件到咱們的博客目錄下 這裏是調用的node.js，命令以下<br> `npm start`<br> ```javascript hexo s #全程是hexo server ``` 下圖是徹底安裝後的文件 ![](https://i.imgur.com/6POGzQ8.png) ## 3. 運行Hexo 1. 安裝好hexo後，經過下面代碼能夠生成靜態頁面，生成的靜態頁面存儲在public目錄下: <br> ```avascript hexo g #全稱是hexo generate ` ``` <br> 2. 運行服務 開啓端口 開啓預覽訪問端口（默認端口4000，git bash下 ‘ctrl + c’ 關閉server）輸入命令 ```javascript hexo s #全程是hexo server ``` 下圖表示運行成功 能夠看到地址 咱們訪問http://localhost:4000/ ，便可看到hexo自帶的hello world 頁面 ![](https://i.imgur.com/blJofYy.png) 至此，hexo已經在本地搭建完成。 ## 4. 配置主題 hexo默認使用的是landscape主題，下文將採用NexT主題。 Next主題目前是最好看最流行的 想更換主題的能夠參考: [有哪些好看的 Hexo 主題？](https://www.zhihu.com/question/24422335) ### 安裝主題 將next的代碼clone到項目中，保存在github倉庫中的`themes/next`目錄下: ```javascript $ git clone https://github.com/iissnan/hexo-theme-next themes/next ``` ### 修改配置 1. 修改根目錄下的_config.yml配置文件： 新建的hexo文件中使用的是默認的主題landscape，將其修改成next（next爲主題安裝的目錄名`themes/next`） 2. 修改後運行輸入命令 ```javascript hexo server -g #爲`hexo generate`及`hexo server`的縮寫 ``` 而後瀏覽器訪問就能夠看到咱們變化的主題啦 ![](https://i.imgur.com/3u9wnNW.png) ### 設置主題 - 添加咱們的我的介紹 修改根目錄下配置文件**_config.yml ** 頭像的地址也在這兒設置 經過avatar字段設置，站點外頭像設置avatar：圖片url，站點內頭像設置avatar：目錄/圖片名.圖片格式 在根目錄下的_config.yml文件中，添加avatar字段： ![](https://i.imgur.com/CllBJP5.png) NexT 經過 Scheme 提供主題中的主題。 Mist 是 NexT 的第一款 Scheme。啓用 Mist 僅需在 主題配置文件 中將 #scheme: Mist 前面的 # 註釋去掉便可。 ![](https://i.imgur.com/zzHbIl3.png) 修改`themes/next`目錄下的_config.yml文件： ### 添加首頁的標籤欄 1. 添加標籤欄 ```javascript hexo new page tags ``` 修改剛建立的tags文件夾(**github倉庫目錄\source\tags**)下的index.md文件： ![](https://i.imgur.com/u6tQ9GQ.png) 在`themes/next`目錄下的_config.yml文件中，將 menu關鍵字 中 about 前面的註釋去掉便可 2. 添加分類 ```javascript hexo new page categories ``` 修改剛建立的categories文件夾(**github倉庫目錄\source\categories**)下的index.md文件 3. 添加About 界面 ```javascript hexo new page about

在themes/next目錄下的_config.yml文件中，將 menu關鍵字中 about 前面的註釋去掉便可

同類型的操做還有配置 sitmap 和錯誤的404界面node

404界面

騰訊公益404頁面使用方法，新建 404.html 頁面，放到主題的 source 目錄下(themes/next/source)，內容以下git

<!DOCTYPE HTML>
  <html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="robots" content="all" />
    <meta name="robots" content="index,follow"/>
  </head>
  <body>

  <script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8" homePageUrl="your site url " homePageName="回到個人主頁"></script>

  </body>
  </html>

界面美化

添加github綬帶

github綬帶github

獲取源碼後，修改arsense.github.io\themes\next\layout目錄下的_layout文件：
將綬帶的代碼，添加在上方便可。

完成以上步驟後，運行效果：chrome

添加RSS

輸入命令npm

npm install --save hexo-generator-feed

修改根目錄下配置文件_config.yml windows

在themes/next目錄下的_config.yml文件中，
添加瀏覽器

# Set rss to false to disable feed link. # Leave rss as empty to use site's feed link. # Set rss to specific value if you have burned your feed already. rss: /atom.xml

修改底部的#爲標籤

修改模板

/themes/next/layout/_macro/post.swig，搜索 rel="tag">#， 將 # 換成<i class="fa fa-tag"></i>

文章底部添加本文結束

在路徑 \themes\next\layout_macro 中新建 passage-end-tag.swig 文件,並添加如下內容：

div> {% if not is_index %} <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文結束<i class="fa fa-paw"></i>感謝您的閱讀-------------</div> {% endif %} </div>

接着打開\themes\next\layout_macro\post.swig文件，在post-body 以後， post-footer 以前添加以下畫紅色部分代碼（post-footer以前兩個DIV）：

<div> {% if not is_index %} {% include 'passage-end-tag.swig' %} {% endif %} </div>

而後在themes\next打開配置文件（_config.yml),在末尾添加：

上傳github

這裏咱們已經基本大功告成

hexo clean hexo generate hexo deploy

輸入命令便可部署hexo到github 上
在裏面的末尾添加：(請注意在冒號後面要加一個空格，否則會發生錯誤！)

看URL訪問

番外篇

hexo經常使用命令

hexo命令

經常使用命令：
　　hexo new 「postName」 #新建文章
　　hexo new page 「pageName」 #新建頁面
　　hexo generate #生成靜態頁面至public目錄
　　hexo server #開啓預覽訪問端口（默認端口4000，’ctrl + c’關閉server）
　　hexo deploy #將.deploy目錄部署到GitHub

經常使用複合命令：
　　hexo deploy -g
　　hexo server -g

簡寫：
　　hexo n == hexo new
　　hexo g == hexo generate
　　hexo s == hexo server
　　hexo d == hexo deploy