利用Hexo+GitHub Page搭建一個個人博客網站

利用Hexo+GitHub Page搭建一個個人博客網站


利用Hexo+GitHub Page搭建一個個人博客網站

Hexo


什麼是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進行倉庫的創建。


利用Hexo+GitHub Page搭建一個個人博客網站


New repository

利用Hexo+GitHub Page搭建一個個人博客網站


倉庫的詳細地址

在倉庫名字輸入框中輸入:

Github暱稱.github.io

千萬注意,前面的暱稱是你註冊GitHub時的暱稱,結尾一定是'github.io'

然後點擊Create repository即可完成倉庫的創建。

Tips:複製此時的倉庫地址


利用Hexo+GitHub Page搭建一個個人博客網站


複製倉庫地址

配置GitHub Page

完成倉庫創建後,找到倉庫的Setting,跳轉到GitHub Page部分,Source部分設置如下:


利用Hexo+GitHub Page搭建一個個人博客網站


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/)


分享到:


相關文章: