本站的部落格搭建採用hexo+next主題,部署在github pages
。下面手把手帶你搭建免費高效的部落格系統~
hexo
–快速、簡潔且高效的部落格框架,基於nodejs環境。
hexo
使用markdown
(或其他渲染引擎)解析文章,在幾秒內,即可利用靚麗的主題生成靜態網頁。
安裝前提:
git
:windows | mac
安裝hexo:
npm install -g hexo-cli
具體的安裝過程的問題,這裡不再過多提及。官方安裝文件:新建資料夾建立專案:
hexo init cd npm install
若需要在當前資料夾直接建立,在當前目錄下hexo init
。
hexo專案目錄結構:
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
_config.yml
:**的配置資訊。官方配置文件:configuration。
package.json
:應用程式的資訊。
scaffolds
:模版資料夾。當您新建文章時,hexo 會根據scaffold來建立檔案。官方模板配置文件:templates
source
:資源資料夾是存放使用者資源的地方。除_posts
資料夾之外,開頭命名為 _ (下劃線)的檔案 / 資料夾和隱藏的檔案將會被忽略。markdown 和 html 檔案會被解析並放到 public 資料夾,而其他檔案會被拷貝過去。
themes
:主題資料夾。hexo 會根據主題來生成靜態頁面。
專案下的`_config.yml`為**專案配置檔案**,主題下的`_config.yml`為**主題配置檔案**。
執行
hexo generate && hexo server --debug
即可在本地http://localhost:4000/ 檢視預設的**樣式啦~
hexo init [folder]
如果沒有設定 folder ,hexo 預設在目前的資料夾建立**。
hexo new [layout]
如果沒有設定layout
的話,預設使用 **配置_config.yml
中的default_layout
引數代替。
如果標題包含空格的話,請使用引號括起來。
也可以簡寫:hexo n [layout]
hexo generate
也可以簡寫:hexo g
hexo server
也可以簡寫:hexo s
hexo deploy
也可以簡寫:hexo d
部署到github pages
請看這篇文章~
hexo clean
清除快取檔案 (db.json) 和已生成的靜態檔案 (public)。
在某些情況(尤其是更換主題後),如果發現您對站點的更改無論如何也不生效,您可能需要執行該命令。
更改配置檔案_config.yml
後需要執行該命令。不然可能會報unhandled rejection error: enoent: no such file or directory, open '**'
。
hexo的預設主題是landscape
,官方推薦主題:
本部落格**使用的主題是next.pisces
如需要v6及以上的,請看新倉庫
先從git將主題拉下來,在專案下
git clone themes/next
在專案配置檔案_config.yml
中查詢theme
,修改值為theme: next
。(注意next前的空格哦)
然後hexo clean && hexo generate && hexo server --debug
就能看見next主題的預設樣式啦
選擇next.pisces需要在themes/next
下的主題配置檔案_config.yml
中查詢scheme
,修改值為scheme: pisces
再執行上面的重新啟動,
就能看到樣式啦
安裝hexo和next主題到此就結束啦~
建議在專案下package.json
中配置開發執行指令碼和部署指令碼,在最外層json中新增:
"scripts"
:,
以後開發執行npm run dev
就好啦。線上部署使用npm run start
。 hexo搭建部落格
有乙個github賬號,沒有的話去註冊乙個 安裝了node.js npm 安裝了git 新建乙個名為你的使用者名稱.github.io的倉庫,比如說,如果你的github使用者名稱是test,那麼你就新建test.github.io的倉庫 必須是你的使用者名稱,其它名稱無效 將來你的 訪問位址就是 ...
hexo部落格搭建
使用hexo搭建乙個部落格,並託管在github pages上的簡易教程。在github上建立乙個倉庫,名稱為.github.io npm install g hexo cli hexo init cdnpminstall hexo server在4000埠檢視效果 在 config.yml檔案中,...
hexo搭建個人部落格 使用Hexo搭建個人部落格
node.js 附帶npm git npm install hexo cli g g選項表示全域性安裝 global 即安裝到你的電腦中而非專案目錄中,建議新增,這樣在命令列就可以直接使用hexo命令。hexo init 目錄名稱 cd 目錄名稱 npm i 官方文件已經完整說明了每個配置項的作用,...