最近學委跟小伙伴搞了一個py4ever 開源站點，使用的就是hexo，
下面是站點資訊：py4ever開源站
它就是基于hexo來生成的，當然做了一些定制，
這次，學委會一步一步的指導大家建立一個博客站，
什么是hexo
hexo 是一款博客生成工具，它基于Markdown語法的博客生成，
hexo它也發行了基于NodeJS的cli庫（命令列工具），在npm上面可以查找到，下面進入安裝，
可以簡單理解，它就是一個博客網站工廠，專門生成博客網站的， 但是需要安照它的方式，
下面學習hexo生成博客的步驟，
安裝
全域安裝，把hexo命令添加到運行環境的PATH變數上，這樣隨處可用，
npm install -g hexo-cli
通常我們安裝完一個庫，馬上就查看版本/或者查看幫助，確保安裝正常
hexo -v
第一步 生成站點專案
運行下面的命令創建博客專案：
hexo init
該命令會快速的生成博客模版檔案，
我們這里來看這個站點就是一個標準的NodeJS專案，
如下圖，檔案很多，重點是package.json，它復制管理專案的其他依賴工具庫，
然后就是themes，這是博客的主題風格，也就是整體樣式，布局方面的，就像音樂的中國風，R&B之類的，它限制了整首歌的曲調，對我們博客來說就是整個觀感，整體的排版，
然后就是scaffolds：比較簡單，就是創建分類/文章等的模板，可以修改的，
關于這個NodeJS專案更多資訊可以補充學習：雷學委之NodeJS愛好系列， 我們繼續博客頁面的編輯，
修改站點資訊
如下，我們把title先修改了：
還有其他細節操作，我們先生成站點，
第二步 生成站點網頁
預覽站點之前需要先生成網站的頁面，這里使用下面的命令
hexo generate #或者hexo g
該命令幫我們把網站從md檔案模版生成為html檔案，可以看到專案目錄內有一個public目錄：
這個就是最終博客網站會顯示的html檔案了，懂html的朋友都知道，這里所見即所得，你在html放什么文字顏色塊，瀏覽器就相應的顯示出來，
第三步 預覽網站
我們繼續使用默認主題，運行下面的命令，先看修改后的網站效果，
hexo server
運行效果如下：
我們可以打開瀏覽器查看：
hexo 工具啟動了一個服務器，渲染了我們剛剛生成的博客站點，非常方便，
同時，博客自帶了一篇博客文章“Hello World”， 這是hexo默認生成的，
編輯博客頁面
我們打開博客檔案夾內的source目錄，它放置了站點的文章，
這里就很好弄了，它是一個markdown（MD）格式的檔案，
小白可以簡單理解，它一種檔案風格規范，比如‘# ’ 開頭表示一個大標題，一級標題，‘## ’ 開頭表示二級標題，
下面修改一下：
- 修改了title為：雷學委博客教程
- 修改了二級標題為：Quick Start / 快速開始
- 添加了一行文本： “第一行文本（from 學委）”
我們可以根據需要修改檔案內容，重新運行下面命令就能查看效果了
hexo generate #或者hexo g
hexo server #或者hexo s
重繪剛剛的頁面，我們看到博客內容變化了，
總結與延伸
本文展示了一個博客站點的快速生成，
添加新博客，可以復制helloworld.md或者使用‘hexo new 博客名稱’，
發布站點到網站簡單來說可以復制public目錄到服務器，渲染即可，但是Hexo提供了更高效的做法，我們下篇繼續講解，
下一篇，學委會具體介紹py4ever網站的技術搭建細節，
喜歡Python的朋友，請關注學習 十年老將帶你做開源專案 or Python基礎專欄 or Python入門到精通大專欄
持續學習持續開發，我是雷學委！
編程很有趣，關鍵是把技術搞透徹講明白，
創作不易，請關注收藏點贊，或者留下評論打打氣！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/304522.html
標籤：其他
下一篇：HTML5+CSS期末大作業：個人網站設計——回應式個人簡歷介紹網頁(5頁) HTML+CSS+JavaScript