新建 absolute out windows github one pid 3.1 block

一、前言

Hexo 是一個基於 NodeJs 博客框架，可以快速的幫我們搭建一個博客系統，Hexo使用的是Markdown（下文簡稱MD）解析文章的，在幾秒內即可利用靚麗的主體生成靜態網頁。

推薦使用 Hexo 有三大理由： - 有大量的主題可供人們選擇 - 使用MD解析文章，MD是現在主流的文章格式 - 可以快速的生成靜態網頁，對於系統性能要求低 本文將包含的內容： - Hexo安裝 - 後臺模式啟動Hexo - Hexo主題更換 - 構建Hexo分類列表頁 - 添加評論功能 - 使用Hexo-Admin插件更方便的發布文章 本文實踐環境： - Ubuntu 16.04 # 二、Hexo安裝 ## Setp1：安裝NodeJs環境 - 下載對應平臺的安裝包 輸入網址：https://nodejs.org/en/download/ 找到對應的平臺進行下載，如果是Windows平臺可以直接使用xxx.msi進行傻瓜式的安裝即可，如果是Linux系統，需要下載安裝包，然後上傳到對應的服務器，等待後續的操作。 - 解壓 > tar -xvf node-v8.11.4-linux-x64.tar.xz - 設置全局變量 >sudo ln /用戶Node解壓包地址/bin/node /usr/local/bin/node > >sudo ln /用戶Node解壓包地址/bin/node /usr/local/bin/npm 進行如上配置之後，nodejs環境已經安裝好了，使用命令查看nodejs版本 > node -v ## Setp2：安裝Hexo腳手架 >npm install hexo-cli -g 所謂的“腳手架”也就是安裝對應的客戶端，使它具備操作自己的能力。這樣說可能有點繞，比如說Hexo腳手架的作用就可以創建Hexo框架的項目，新建頁面，編譯Hexo項目，發布運行Hexo項目對，腳手架是讓其擁有操作自身的能力。 ## Setp3：初始化Hexo 使用命令： >hexo init blog > >cd blog > >npm install ## Setp4：啟動Hexo >hexo s hexo s是hexo server的縮寫，正常啟動之後，在瀏覽器輸入：http://localhost:4000/ 這時候就能看到我們已經搭好的Hexo博客了，是不是很方便。 # 三、後臺模式啟動Hexo 上面我們已經博客搭好了，但是退出控制臺之後發現訪問不了了，這是因為啟動Hexo訪問的命令終止了，這個時候我們需要使用後臺模式來啟動Hexo了。 和後臺啟動NodeJs一樣，我們有兩種方式可以實現後臺模式啟動： 1. 使用Linux本身自帶的nohup命令啟動； 2. 使用第三方守護線程的方式啟動，比如PM2； 下來我們分別來實現以上兩種方式。 ## 3.1 使用nohup模式啟動 - nohup啟動命令： > nohup hexo s -p 80 & > > exit 其中“-p 80”是指定端口號。 - 停止命令： > killall hexo ## 3.2 使用PM2啟動 ### Setp1：安裝PM2 > npm i pm2 -g ### Setp2：編寫啟動腳本 創建app.js，放在博客根目錄，代碼如下： ```javascript //run const { exec } = require(‘child_process‘) exec(‘hexo server -p 80‘,(error, stdout, stderr) => { if(error){ console.log(‘exec error: ${error}‘) return } console.log(‘stdout: ${stdout}‘); console.log(‘stderr: ${stderr}‘); }) ``` ### Setp3：啟動項目 進入博客根目錄，輸入命令： > pm2 start app.js 更多pm2命令 ``` pm2 stop all #停止所有應用 pm2 restart all #重啟所有應用 pm2 delete all #刪除所有應用 pm2 list #查看所有應用 ``` ## 3.3 總結 nohup和pm2的區別： - nohup比pm2使用更簡單 - pm2功能比nohup更強大，有完善的日誌信息，可以查看詳細的運行情況 - pm2有相應的管理視圖，可以方便多應用的管理和運行 - pm2可以設置多實例運行nodejs程序，可以充分利用系統資源 # 四、主題更換 Hexo另一個強大之處，在於它有很多的主題可以使用，方法地址：https://hexo.io/themes/ 選擇你喜歡的主題，以“MaterialFlow”為例，更換步驟如下： ## Setp1：下載主題 訪問：https://github.com/stkevintan/hexo-theme-material-flow 點擊Clone or download => Download ZIP 下載文件到本地。 ## Setp2：復制主題到服務器 把下載好的文件進行解壓之後，拷貝到Hexo\themes目錄下。 ## Setp3：修改配置文件 找到Hexo根目錄的_config.yml修改： > theme: landscape 為 > theme: material-flow 繼續更改根目錄的_config.yml文件為自己的信息，比如title，author等，可以參照這個配置文件： https://github.com/stkevintan/hexo/blob/master/_config.yml 而主題material-flow下也有一個_config.yml文件，這個文件是配置使用的過程的，比如分類，標簽的名稱順序等，查找配置文件： https://github.com/stkevintan/hexo/blob/master/themes/material-flow/_config.yml ## Setp4：重啟項目 到目前為止已經完成了主題的更換，如果你是使用的nohup就是用“killall hexo”停止，在啟動項目即可，如果使用pm2就是用“pm2 restart all”，查看新換的主題吧。 # 五、構建Hexo分類列表頁 使用Hexo是沒有分類集合頁面的，需要用戶自己創建，步驟如下： ## Setp1：創建分類頁面 > hexo new page "categories" ## Setp2：配置分類導航 打開主題內的`_config.yml`，註意不是根目錄的`_config.yml`，配置如下： ```xml menu: - name: 首頁 slug: home url: / - name: 分類 slug: categories url: /categories ``` 把分類顯示到導航的第二個，如下圖：  ## Setp3：修改模板 打開文件layout/_partial/article.ejs，找到 ``替換div的所有內容為下面這段代碼： ``` <% if (page.type === "tags") { %> <%- _p(‘counter.tag_cloud‘, site.tags.length) %> <%- tagcloud({ min_font: 12, max_font: 30, amount: 200, color: true, start_color: ‘#ccc‘, end_color: ‘#111‘ }) %> <% } else if (page.type === ‘categories‘) { %> <%- _p(‘全部分類‘, site.categories.length) %> <%- list_categories() %> <% } else { %> <% if (post.excerpt && index){ %> <%- post.excerpt %> <% } else { %> <%- post.content %> <% } %> <% } %> ``` ## Setp4：修改樣式 以“material-flow”主題為例，打開文件“themes/material-flow/source/less/_article.less”添加下面樣式，到文件最底部： ``` /*tag-cloud*/ .tag-cloud { text-align: center; margin-top: 50px; } .tag-cloud a { display: inline-block; margin: 10px; } .tag-cloud-title { font-weight: 700; font-size: 24px; } .tag-cloud-tags { margin-top: 15px; a { display: inline-block; text-decoration: none; font-weight: normal; font-size: 10px; color: #fff; line-height: normal; padding: 5px 5px 5px 10px; position: relative; border-radius: 0 5px 5px 0; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; &:hover { opacity: 0.8; } &:before { content: " "; width: 0; height: 0; position: absolute; top: 0; left: -18px; border: 9px solid transparent; } &:after { content: " "; width: 4px; height: 4px; background-color: #fff; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); position: absolute; top: 7px; left: 2px; } } a.color1 { background: #FF945C; &:before { border-right-color: #FF945C; } } a.color2 { background: #F5C7B7; &:before { border-right-color: #F5C7B7; } } a.color3 { background: #BA8F6C; &:before { border-right-color: #BA8F6C; } } a.color4 { background: #CFB7C4; &:before { border-right-color: #CFB7C4; } } a.color5 { background: #7B5D5F; &:before { border-right-color: #7B5D5F; } } } /*category-all-page*/ .category-all-page { margin-top: 50px; .category-all-title { font-weight: 700; font-size: 24px; text-align: center; } .category-list-item:after { content: ‘‘; clear: both; display: table; } .category-list-count { float: right; margin-left: 5px; } .category-list-count:before { content: ‘一共 ‘; } .category-list-count:after { content: ‘ 篇文章‘; } } ``` 效果如下圖：  如上的配置設置完之後，還差一步給文章設置了分類之後，才會顯示出來。 ## Setp5：設置文章屬性 添加如下屬性在MD的開頭： ``` --- title: RabbitMQ在Ubuntu上的環境搭建 date: 2018-06-02 tag: "rabbitmq" categories: - [Java] - [MQ] --- ``` 其中： - title 文章標題 - date 文章發布日期 - tag 文章標簽 - categories 文章分類，多個獨立的分類使用上面代碼的格式 設置了文章分類之後，所有文章的分類就會自動顯示出來了。 # 六、添加評論功能 本文對接的評論為暢言，暢言微微SOHU出品的，在行業裏面使用的很廣泛，比如17173，人民網，中國新聞網等調用的暢言，優點是對接簡單，國內的速度快，不需要FQ，缺點是嵌套的域名需要備案。 ## Setp1：註冊暢言賬號 訪問：https://changyan.kuaizhan.com/ 註冊賬號，安裝暢言的引導註冊應用，獲取評論安裝代碼，每個應用的都不一樣，其中appid和conf是獨立的，復制暢言評論安裝代碼。 ## Setp2：修改主題配置 找到主題下的`_config.yml`在底部添加： ``` changyan: on: true ``` ## Setp3：修改代碼 打開文件“material-flow\layout\_partial\article.ejs”替換代碼： ``` <% if (post.comments && config.disqus_shortname){ %>

<% } %> ``` 為： ``` <% if (post.comments && theme.changyan.on){ %> <%- partial(‘comments/changyan‘, { }) %> <% } %> ``` 修改完之後，重啟項目。 評論效果如下：  # 七、使用Hexo-Admin更方便的發布文章 使用Hexo快是快，但是有一個問題，就是每次發布文章都要手動發布到服務器上，並且還要進行服務器重啟，是一件很麻煩的事情，那麽有沒有簡單的方法，可以直接通過後臺進行文章錄入和發布呢？ 這就是Hexo-Admin插件的作用，讓你可以直接通過後臺管理和新增文章，真是太爽了，下來一起來看看實現步驟吧。 ## Setp1：安裝Hexo-Admin插件 > npm install --save hexo-admin ## Setp2：啟動插件 經過上面安裝已經挖完成了hexo-admin的安裝了，這個時候只需要重啟項目，訪問http://localhost/admin/ 就可以看到管理後臺了，如下圖：  ## Setp3：設置密碼 我們發現第一次登錄是沒有密碼的，這可不行，接下來我們要設置一個密碼，點擊管理後臺的Settings，如下圖：  進入頁面之後，輸入用戶名、密碼，保存生成的賬號信息復制到根目錄下的`_config.yml`文件最底下，配置賬號信息，如下圖：  重啟服務，這個時候，我們重新訪問http://localhost/admin/ 發現生效了，我們只有輸入正常的用戶名或者密碼才能進入系統。 文章的添加和修改和簡書很像，這裏就不過多描述了，更多使用的細節用戶自己慢慢研究吧。 # 八、總結 到目前為止，我們已經把整個博客系統搭建起來了，包括和用戶的互動留言，如果需要打賞功能的話，在article.ejs文章下面貼上自己的×××或支付寶的二維碼即可，當然還有很贊的博客搜索功能，也是Hexo也是直接支持的，不用用戶過多的配置，就這樣這個博客系統已經搭建完畢了。

使用Hexo搭建個人博客的終極資料