如何利用hexo擁有一個本身的小站

迫於阿里雲等雲服務器太貴(窮則獨善其身),又想擁有一個本身的小站點怎麼辦呢,hexo 來幫你。hexo 是一個快速、簡潔且高效的博客框架,支持markdown,部署簡單易上手。vue

hexo 官網node

hexo.io/zh-cn/git

相似的還有github

hugo : Go語言實現的靜態網站生成器面試

gohugo.io/shell

vuepress : Vue 驅動的靜態網站生成器npm

vuepress.vuejs.org/zh/json

還有wordpress等等。bash

準備工做

  • 一個 github 帳號(碼雲Gitee 也能夠)
  • 本地安裝 Node.js 環境,安裝後自帶 npm(Node.js的包管理工具)你要熟悉 node 和 npm 的基本命令。

多說一點,若是你是 macOS 推薦使用 brew 安裝各類軟件,管理起來很方便,若是你沒有用過 brew 那你是時候瞭解一下了(Homebrew官網)。再多說一點 Homebrew 的做者就是那個曾經去 Google 面試,由於寫不出反轉二叉樹被拒的大佬。服務器

我本地的 node 版本以下:

$ node -v
v11.6.0
$ npm -v
6.5.0
複製代碼

安裝 hexo

npm install -g hexo-cli 
複製代碼

image.png

初始化

hexo init jiudian
複製代碼

image.png

預覽

進入到 jiudian 目錄,其實如今已經能夠在本地跑起來了。執行如下命令

hexo s
複製代碼

跑起來以後訪問 http://localhost:4000 (默認端口是4000),能夠看到 hexo 默認的主題 landscape 。

來看下執行 hexo init 以後生成的目錄以下,_config.yml 是一個比較重要的文件,基本的配置都在這裏,好比主題的設置、網站的標題等等。 themes 文件夾下是主題。source 裏是文章的內容。

.
├── _config.yml
├── db.json
├── node_modules
├── package.json
├── scaffolds
├── source
├── themes
└── yarn.lock
複製代碼

默認的主題有點醜,咱們看看如何更換主題。在官網或者 github 搜索 hexo-theme 找到一個你喜歡的主題,好比我用 github.com/iissnan/hex… 。而後在你的站點目錄也就咱們這裏的 jiudian 目錄下執行 git clone命令,把主題 clone 到 themes 文件夾下。

git clone https://github.com/iissnan/hexo-theme-next.git themes/next
複製代碼

完成以後,修改 _config.yml 的 theme: landscape 屬性,改爲 theme: next。而後從新執行 hexo s,就能夠看到效果了。

image.png

github部署

如何推送到 github 讓全部人都能訪問呢?

在 github 新建一個倉庫,注意免費用戶必定要創建 public repository 不然訪問不了。倉庫的名字是你的github用戶名.github.io。接下來咱們安裝下 hexo-deployer-git 這個插件。執行如下命令,hexo-deployer-git 做用是幫咱們把 hexo 生成的頁面推送到 github。

npm install hexo-deployer-git --save
複製代碼

安裝完成後配置一下_config.yml 個人配置以下:

deploy:
  type: git
  repo: https://github.com/77Y/77Y.github.io.git
  branch: master
複製代碼

而後依次執行

hexo g
hexo d
複製代碼

執行完成以後訪問 你的github用戶名.github.io 就能夠看到你的小站了。

發佈文章

hexo new 如何利用hexo擁有一個本身的小站 
複製代碼

執行以上命令能夠發佈一篇文章。完成後再執行 hexo s 能夠看下效果

image.png

若是想發佈到github須要再執行 hexo d

hexo 經常使用命令

$ hexo n "文章名稱" (hexo new "文章名稱") 建立
$ hexo g (hexo generate)生成
$ hexo s (hexo server)預覽
$ hexo d (hexo deploy)部署
複製代碼

配置域名

  • 在 hexo 建立的項目的 source 目錄下建立 CNAME 文件,而後把本身的域名填進去。

image.png

  • 打開 github 項目的 setting,添加 Custom domain 同時選擇 Enforce HTTPS ,將支持 https。

image.png

  • 在域名解析(這裏是阿里雲的控制檯)裏進行以下設置

image.png

最後大功告成,歡迎訪問 democome.com

image.png
相關文章
相關標籤/搜索