1. 程式人生 > >hexo部落格零基礎搭建系列(一)

hexo部落格零基礎搭建系列(一)

 

 

文章目錄

    • 其他搭建
      • 1.簡介
      • 2.安裝Node和Git
      • 3.安裝Hexo
      • 4.Hexo的目錄結構
      • 5.我的版本

 

其他搭建

不好意思,下面的連結都是CSDN的連結,如果要在部落格園看,請點我的分類檢視。因為我是剛剛搬過來,那邊的markdown語法在這邊變成這樣。。

hexo4快速搭建部落格(二)更換主題
hexo4快速搭建部落格(三)美化 很全面 收集很多資料
hexo4快速搭建部落格(四)寫作技巧包含圖床和自動變圖床的外掛
hexo4搭建部落格系列(五)優化部落格(無坑) 部署到阿里雲
hexo4搭建部落格系列(六)百度,必應,谷歌收錄(無坑)

搭建一個部落格不難,但是網上資料好多坑。可能我有些會寫錯,請在評論指出。但是有經過測試的。
我用的版本是 hexo4.0 + NexT7.6版本。
我的個人部落格

有阿里雲伺服器就可以部署上去,沒有也可以用github來存放,在github上是免費的,但是訪問速度比較慢。

有何不懂的儘管騷擾我,我可以接到通知。讓問題可以儘快解決

1.簡介

網上有很多hexo+nexT7的教程,很多因為現在版本問題,有些配置完會出錯或者不生效。搭建這個部落格用了我4天的時間,加上美化。
期間使用nexT5.0和hexo4.0導致訪問路徑有點問題,出現 http://localhost:4000/archives/20%/ 我不明白咋回事,所以刪了兩次本地部落格。結果發現是版本問題。

首先在前面說清楚,每做完一步就給我使用三條指令本地測試(下面會說)一下,別傻傻的等著搞完一半甚至全部做完才來測試,要是出錯那可是很致命的,最壞的結果當然是重做。如果每次都有測試要是出現bug就可以根據哪步來排除問題。

而且我後期是使用阿里雲伺服器來搞的,別的伺服器沒碰過,但大致是一樣的。後面有想搞域名的現在就可以先去搞域名,比如阿里雲的萬網(我是在這個搞的),騰訊雲、百度雲等都可以。並且先去備案。當然不備也可以,CDN加速都需要備案才可以申請。先把案備了以後也好辦事。

2.安裝Node和Git

使用hexo需要安裝兩個前置工具: Node 和 Git。

Node直接預設安裝就行,點選下載 Node。安裝完不用理。

Git也是直接下載,點選下載 Git。一直預設安裝完需要如下操作:

  • 如果沒有GitHub賬號的,自己去註冊,有賬號的,直接建立一個新的倉庫,名為 yourgithubname.github.io,其中yourgithubname是你的github名稱,必須操作。

比如我的:/ 前面是我的使用者名稱,後面就是用我的使用者名稱。

  • 配置Git的SSH Key,第一次使用Git Bash使用一些配置:
    • 你的github使用者名稱,非暱稱,並填寫你的github註冊郵箱
git config --global user.name "name"
git config --global user.email  "[email protected]"
  • 配置SSH,可以自己登入,每次部署就不用登入
ssh-keygen -t rsa -C "郵件地址"
  • 然後連續3次回車,最終會生成一個檔案在使用者目錄下,開啟C盤下的使用者目錄下你的使用者名稱繼續開啟,找到.ssh\id_rsa.pub檔案(像我的 C:\Users\chast.ssh),記事本開啟並複製裡面的內容,開啟你的github主頁,右上角點你的小頭像進入Settings -> SSH and GPG keys -> New SSH key:Title隨便命名,把複製的內容貼上到Key中。

3.安裝Hexo

  • 然後點開剛剛安裝的git,在 Window開始介面會出現一個 Git Bash,點選它,然後在一個磁碟上面建立一個目錄,隨便名,再使用Git Bash定位到目錄中
  • 然後安裝Hexo: 預設安裝為4.0版本。
npm install -g hexo
  • 初始化Hexo。
hexo init
  • 初始化就如下面這樣。

  • 以後在本地啟動部落格就使用下面三條指令,用於測試。

hexo clean // 清除快取
hexo g  // 生成靜態頁面
hexo s // 啟動本地專案
  • 然後就可以在瀏覽器上訪問 localhost:4000 來看到最初的部落格,如果看到說明成功了。

  • 然後部署部落格到git上,先在站點目錄下的_config.yml檔案最後一行配置。

deploy:
  type: git
  repository: https://github.com/yourgitname/yourgitname.github.io.git
  branch: master
  • 再安裝推送外掛
 npm install hexo-deployer-git --save
  • 然後使用下面三條命令。
hexo clean // 清除快取
hexo g  // 生成靜態頁面
hexo d // 部署

4.Hexo的目錄結構

  • 如果想自定義修改站點主題的內容在:站點目錄\themes\next\layout中修改,根據檔名。
  • 如果想自己新增css樣式,在主題配置檔案中把下圖的註釋去掉,然後去對應的目錄建立該檔案,然後就在裡面新增css樣式。

5.我的版本

如何檢視我的版本,在站點根目錄下(hexo初始化的地方)有一個 packge.json ,裡面就可以看到使用hexo初始化的結果。

主要注意跟我的hexo和等下要裝的主題nexT是否一致,最好一致,可以在初始化後拿我下面的程式碼去覆蓋原始碼,然後使用 npm install ,會根據json中的程式碼重新安裝一樣的版本。不過建議別copy我的去安裝,不知道會報什麼錯,還是一步一步來。版本的一致用於後面的美化主題是否能生效有關係。

注意:未來應該不會更新,現在主要用的版本是 hexo4.0 和 next7.x,注意看版本

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
  "hexo": {
    "version": "4.0.0"
  },
  "dependencies": {
    "gulp": "^4.0.2",
    "gulp-clean": "^0.4.0",
    "gulp-htmlclean": "^2.7.22",
    "gulp-htmlmin": "^5.0.1",
    "gulp-imagemin": "^6.2.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-uglify": "^3.0.2",
    "hexo": "^4.0.0",
    "hexo-abbrlink": "^2.0.5",
    "hexo-asset-image": "^1.0.0",
    "hexo-autonofollow": "^1.0.1",
    "hexo-baidu-url-submit": "0.0.6",
    "hexo-deployer-git": "^2.1.0",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-baidu-sitemap": "^0.1.6",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-feed": "^2.2.0",
    "hexo-generator-index": "^1.0.0",
    "hexo-generator-search": "^2.4.0",
    "hexo-generator-searchdb": "^1.2.0",
    "hexo-generator-sitemap": "^2.0.0",
    "hexo-generator-tag": "^1.0.0",
    "hexo-neat": "^1.0.4",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-marked": "^2.0.0",
    "hexo-renderer-stylus": "^1.1.0",
    "hexo-server": "^1.0.0",
    "hexo-symbols-count-time": "^0.7.0",
    "hexo-wordcount": "^6.0.1"
  },
  "devDependencies": {}
}

喜歡的記得點個贊
還有後續搭建部落格:
hexo4-NexT7搭建部落格(二)更換主題