1. 程式人生 > >手把手教你搭建HEXO免費博客

手把手教你搭建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

技術分享圖片

在瀏覽器中粘貼,訪問。看到如下頁面(即使我們剛剛輸入的內容)

技術分享圖片 二、gitforwin安裝

百度搜索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免費博客