利用Hexo+GitHub Page搭建一個個人博客網站
什麼是Hexo
Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在幾秒內,即可利用靚麗的主題生成靜態網頁。
Markdown 是一種輕量級的「標記語言」,它的優點很多,目前也被越來越多的寫作愛好者,撰稿者廣泛使用。看到這裡請不要被「標記」、「語言」所迷惑,Markdown 的語法十分簡單。常用的標記符號也不超過十個,這種相對於更為複雜的 HTML 標記語言來說,Markdown 可謂是十分輕量的,學習成本也不需要太多,且一旦熟悉這種語法規則,會有一勞永逸的效果。
推薦閱讀Markdown——入門指南
如何安裝Hexo
安裝 Hexo 只需幾分鐘時間,若您在安裝過程中遇到問題或無法找到解決方式,請在微信內回覆,我們會盡力解決您的問題。
安裝前提(windows環境下)
安裝 Hexo 相當簡單。然而在安裝前,您必須檢查電腦中是否已安裝下列應用程序:
- node.js
- git
如果您的電腦中已經安裝上述必備程序,那麼恭喜您!接下來只需要使用 npm 即可完成 Hexo 的安裝。
npm install -g hexo-cli
如果您的電腦中尚未安裝所需要的程序,請參考以下安裝鏈接指示完成安裝。
- Node.js安裝及環境配置之Windows篇 - 簡書(http://www.jianshu.com/p/03a76b2e7e00)
- Git教程 - 廖雪峰的官方網站(https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000)
安裝Hexo
所有必備的應用程序安裝完成後,即可使用 npm 安裝 Hexo。
npm 通常稱為node包管理器。顧名思義,它的主要功能就是管理node包,包括:安裝、卸載、更新、查看、搜索、發佈等。
npm官網(https://www.npmjs.com/)
安裝命令
npm install -g hexo-cli
如何利用Hexo建站
安裝 Hexo 完成後,請執行下列命令,Hexo 將會在指定文件夾中新建所需要的文件。
hexo init <folder>
cd <folder>
npm install
/<folder>/<folder>
<folder>就是你建博客的根目錄/<folder>
然後執行以下代碼:
hexo generate //hexo g也可以,用於生成靜態頁面
hexo server //hexo s也可以,用於啟動本地服務,預覽調試
接下來在瀏覽器輸入http://localhost:4000/即可實現瀏覽
將博客發佈到GitHub上
當然我們寫博客肯定不能只在本地運行,一定也是希望讓別人可以看見自己的文章的,怎麼把文章發不到網上去呢?
這裡採用的方法是將博客發佈到GitHub Page上
Github是一個面向開源及私有軟件項目的託管平臺,因為只支持git 作為唯一的版本庫格式進行託管,故名為Github
Github Page可以被認為是用戶編寫的、託管在Github上的靜態網頁。
註冊Github賬號
這裡我們就不多講了,小夥伴們可以點擊Github官網,進入官網進行註冊。
創建倉庫
註冊好登錄賬號後,在Github頁面的右上方選擇New repository進行倉庫的創建。
New repository
倉庫的詳細地址
在倉庫名字輸入框中輸入:
Github暱稱.github.io
千萬注意,前面的暱稱是你註冊GitHub時的暱稱,結尾一定是'github.io'
然後點擊Create repository即可完成倉庫的創建。
Tips:複製此時的倉庫地址
複製倉庫地址
配置GitHub Page
完成倉庫創建後,找到倉庫的Setting,跳轉到GitHub Page部分,Source部分設置如下:
Github Page配置
配置Hexo,完成博客的上傳
至此,GitHub部分的配置就結束了,現在開始進行Hexo部分的配置。
找到博客根目錄下的_config.yml文件,下面是該文件的默認配置信息:
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: # The title of your website
subtitle: # The subtitle of your website
description: # The description of your website
author: # Your name
language: # The language of your website
timezone:
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com/child
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace:
# Category & Tag
default_category: uncategorized
category_map:
tag_map:
# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type:
看到這裡,大家千萬別被一長串英文給嚇到了,我們實際上要修改的配置只有幾項,拿我自己的配置,我們繼續往下看:
1 修改網站信息
# Site
title: Blog
subtitle:
description: 從0開始,厚積薄發
author: Yue Yong
language:
timezone:
注意:每一項的填寫,其:後面都要保留一個空格,下同。
2 配置統一資源定位符(個人域名)
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://yueyongdev.github.io/
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
3 配置部署
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://github.com/YueYongDev/YueYongDev.github.io.git
branch: master
其中repo項是之前Github上創建好的倉庫的地址.
branch是項目的分支,我們默認用主分支master。
上傳博客
首先將寫好的markdown文件放入本地博客文件夾source/_post文件夾下。
然後我們只要在終端執行這樣的命令即可:
hexo generate
hexo deploy
這時候我們的博客已經部署到網上了,我們可以在瀏覽器地址輸入欄輸入我們的網址即可,如我的博客是:
https://yueyongdev.github.io/
本教程為博客搭建入門教程,大家可以根據自己的需求做進一步改進,如更換主題、刪除文章等,詳情參考官方文檔(https://hexo.io/zh-cn/docs/)
閱讀更多 僱個城管打天下y 的文章