手把手教你搭建HEXO免費博客
一、環境搭建
node安裝
百度搜索node,進入官網。下載穩定版:
下載好後直接打開安裝
我這裏將其安裝在D盤(可以自己選擇安裝位置)
可以看到安裝包中已經自帶npm包管理工具
等待安裝完成後,WIN+R打開運行對話框。輸入cmd帶開命令行控制程序。
輸入node -v命令檢測node是否安裝成功。成功會顯示出版本號
github註冊
百度搜索github,進入官網註冊。(註意:用戶名跟你的博客域名有關,請慎重取名)
選擇free
點擊start
會叫你去驗證郵箱
進入註冊的郵箱,打開github給我們發送的郵件
點擊驗證鏈接
驗證完成後點擊start,創建倉庫。倉庫名必須為’用戶名.github.io’
創建好後我們來新建個文件,點擊Create new file
文件為index.html,內容為<h1>Hello GitHub Pages</h1>
復制你的倉庫名————用戶名.github.io
在瀏覽器中粘貼,訪問。看到如下頁面(即使我們剛剛輸入的內容)
百度搜索gitforwindows,點擊進入官網點擊下載:
下載好後確認安裝:
我們選擇安裝在D盤
這裏我們選擇Use Windows的這個選項,我們就可以在cmd窗口中使用git命令
win+R打開運行對話框,輸入cmd打開命令行
輸入git檢查是否安裝成功,輸出一堆git相關命令表示安裝成功
github SSH Key 配置
接下來來到我們gitforwin的安裝目錄下,打開git-bash
輸入ssh-keygen -t rsa -C “github的註冊郵箱地址”
一路回車生成密鑰,默認生成在C:Users用戶名.ssh目錄下面
接下來來到github官網,點擊頭像選擇setting
再點擊SSH and GPG keys,選擇右邊的New SSH key
標題可以自定義
找到我們生成的密鑰,默認生成在C:Users用戶名.ssh目錄下面
拷貝到Key下
成功
三、安裝HEXO先在本地新建個blog文件夾(隨意)
在cmd命令行進入到blog文件夾下。(win+R打開運行對話框,輸入cmd打開命令行程序)
heox主頁上的就是安裝命令(npm install hexo-cli -g),復制下來
在cmd從粘貼,回車確認命令,安裝。安裝需要時間,請耐心等待
安裝成功後,運行初始化命令(hexo init hojunBlog)
hexo官網也有部署命令的教程
初始化好後,進入文件夾,輸入命令安裝依賴 npm install(安裝需要時間,請耐心等待)
(網好的請無視)若網絡較差,可以使用淘寶鏡像:
命令:npm install -g cnpm –registry=https://registry.npm.taobao.org
使用就是把npm改成cnpm即可。
網好的作者這裏繼續使用npm
安裝完成後,輸入hexo s -p 5555(在端口5555啟動服務)
在網頁上輸入localhost:5555預覽一下(localhost表示本地訪問,小夥伴是看不到的)
安裝sublime
sublime不是必要的,只是編輯文本用的編輯器。不過安利大家推薦:
百度搜索sublime,進入官網下載
點擊按鈕下載
下載好後確認安裝
我們將其安裝在D盤:
安裝完成後,打開程序
直接將博客文件夾拖入編輯器
打開config文件,需要修改的地方有:網站名,介紹,關鍵字(這部分自己取),url(即是“http://用戶名.github.io)。使用Ctrl+S保存文件
現在我們打開github獲取倉庫地址,點擊頭像->Your profile
點擊對應的倉庫
點擊Clone or download,復制倉庫地址
在config的最後找到deploy,輸入如下內容(註意要有空格和縮進,不然會報錯)
接下來還需要安裝git插件,命令 npm install hexo-deployer-git –save
安裝好後輸入hexo g生成命令
輸入hexo d部署到github
第一提交會提示您配置github的郵箱和用戶名
根據提示配置
在彈出的輸入框中輸入用戶名,密碼登錄
顯示出INFO Deploy done: git表示成功發布到github上
在瀏覽器上輸入 “用戶名.github.io” 即可訪問自己的博客(你可以把這個鏈接發布給小夥伴啦)
四、next主題使用在hexo官網的Themes(主題)下,搜索next
搜索結果點擊跳轉到github倉庫
點擊CN查看中文介紹
點擊詳細安裝步驟
下載最新版本
選擇下載zip版
右鍵->解壓到當前文件夾(若沒有解壓選項,請百度下載或360安全衛士下載壓縮軟件)(作者用的WinRAR)
重命名為next
拷貝到博客目錄的themes下
在sublime中打開config,修改 theme: next。
註意是博客目錄下的config,不是主題目錄下的
hexo g 重新生成一下
hexo s -p 5555本地端口部署
打開瀏覽器輸入:localhost:5555,預覽一下主題效果
需要更多關於next主題的教程,可以百度搜索hexo next,
點擊第一個Next|使用文檔。如下:
發現next支持多種外觀
我們試著換一個外觀模式,打開主題next下的config文件,註釋第一個,顯示第二個。
再在瀏覽器上預覽效果如下。
手把手教你搭建HEXO免費博客