1. 為什么要搭建個(gè)人博客網(wǎng)站？
- 記錄折騰軟件或者技術(shù)的過程，免得下次再折騰的時(shí)候重新找各種網(wǎng)站和教程——省事
- 記錄一下自己所遇到的問題以及解決辦法伊诵。
- 分享自己的生活經(jīng)驗(yàn)
- 裝X
- 我可是以后要做程序猿的男人，不會(huì)自己搭建網(wǎng)站可沒臉見人回官。
2. 搭建網(wǎng)站需要了解的常識(shí)
1. 域名
把互聯(lián)網(wǎng)上的每一個(gè)網(wǎng)站比作房間的話曹宴，那么域名就相當(dāng)于房間號(hào)，不然別人怎么去訪問你的房間歉提。簡單說就是網(wǎng)址笛坦。域名解析是指將域名解析為IP。域名是IP的代名詞,沒有人會(huì)去記IP,訪問網(wǎng)站都是訪問域名的苔巨。
那如何得到域名版扩？有免費(fèi)和付費(fèi)兩種。其中我選擇的Github page就能提供免費(fèi)域名侄泽，付費(fèi)域名那選擇就多了礁芦。國內(nèi)：阿里云、騰訊云。國外：Godaddy柿扣、Name
2. 網(wǎng)頁存放空間
- 購買服務(wù)器或者把自己的電腦當(dāng)服務(wù)器肖方。
- 購買虛擬服務(wù)器
VPS是虛擬服務(wù)器的簡寫,相當(dāng)于一臺(tái)完整的計(jì)算機(jī),可以安裝軟件,存放數(shù)據(jù),下載上傳,但是它不在我們面前,而是在VPS服務(wù)商的機(jī)房里,我們只能通過遠(yuǎn)程去操作這臺(tái)計(jì)算機(jī).由于VPS就相當(dāng)于一臺(tái)完整的計(jì)算機(jī),所以我們在上面的可操作性比較大,我們可以安裝服務(wù)器程序用來提供網(wǎng)頁下載服務(wù),安裝php提供后端處理能力,安裝mysql提供數(shù)據(jù)庫服務(wù).非常靈活.因此VPS可以同時(shí)支持動(dòng)態(tài)博客框架和靜態(tài)博客框架。
VPS 選擇須知：常見主機(jī)操作系統(tǒng)分為 Linux 和 Windows 兩種未状。作為開源系統(tǒng)俯画，Linux 主機(jī)在系統(tǒng)成本、性能以及穩(wěn)定性上目前是絕對(duì)優(yōu)于 Windows 主機(jī)的司草。購買的時(shí)候要注意自己的域名是不是已經(jīng)ICP備案艰垂，如果沒有備案不能選擇大陸的主機(jī)，建議用香港的翻伺，畢竟與日韓美比地理位置相對(duì)于大陸較近比材泄。國外口碑較好的 VPS 供應(yīng)商有 DigitalOcean沮焕，Linode 等等吨岭，這類主機(jī)通常在服務(wù)和質(zhì)量上是有所保證的，價(jià)格在 30-60 美元/每月不等峦树。另外一款較為便宜的 VPS辣辫，叫做版瓦工，價(jià)格在 12 美元一年魁巩。你的域名備案了可以選擇大陸的主機(jī)急灭，比如阿里云，騰訊云都可以 - 使用Github pages
GitHub Pages是GitHub提供的一項(xiàng)免費(fèi)服務(wù).每個(gè)GitHub賬號(hào)可以申請一個(gè)pages倉庫用來存放網(wǎng)頁文件.而GitHub在已經(jīng)安裝好了服務(wù)器程序以便于瀏覽器訪問這些網(wǎng)頁.由于GitHub Pages不支持php和數(shù)據(jù)庫,因此只能在上面部署靜態(tài)博客框架.
3. 博客框架介紹
每篇文章都自己寫網(wǎng)頁是不現(xiàn)實(shí)的,而即使是web開發(fā)大神,也不會(huì)所有網(wǎng)頁都自己寫,因?yàn)樘闊┨爆嵙?那么有沒有什么自動(dòng)化的整理排版網(wǎng)頁生成工具可以用呢?當(dāng)然有!我們需要利用博客框架來自動(dòng)生成網(wǎng)頁文件.
博客框架是指一個(gè)自動(dòng)化的程序,我們只需要以框架要求的語法(如markdown)提供我們博客文章的材料,它就會(huì)自動(dòng)幫我們排版文字,轉(zhuǎn)換成網(wǎng)頁文件,生成網(wǎng)頁層級(jí)組織,生成網(wǎng)站首頁,一切都是全自動(dòng)的,我們只需要關(guān)心我們文章的內(nèi)容就夠了.自動(dòng)化萬歲!
而博客框架一般分為動(dòng)態(tài)頁面框架和靜態(tài)頁面框架兩種.
- 動(dòng)態(tài)框架
動(dòng)態(tài)頁面框架是指用戶在訪問我們的網(wǎng)站的時(shí)候,所有的網(wǎng)頁都是在訪問的時(shí)候動(dòng)態(tài)生成的,平時(shí)沒有,訪問的時(shí)候現(xiàn)場生成,這種框架的好處是搭建簡單,現(xiàn)用現(xiàn)做,支持評(píng)論互動(dòng),功能比較強(qiáng)大.但是需要服務(wù)器支持php和數(shù)據(jù)庫.這一類的框架比較著名的是WordPress.由于這類框架要求服務(wù)器有數(shù)據(jù)庫和php支持,很多人用vps+wordpress搭建個(gè)人博客谷遂。 - 靜態(tài)框架
這一類的框架是指我們每次在寫完文章后啟動(dòng)框架為我們生成一套網(wǎng)頁文件葬馋，這套文件部署在服務(wù)器上供別人訪問，其中的內(nèi)容是不會(huì)變動(dòng)的肾扰，直到我們下次修改或?qū)懶碌奈恼潞笤偕梢惶仔碌奈募渴鸬椒?wù)器后畴嘶，網(wǎng)站的內(nèi)容才會(huì)改變．網(wǎng)站上的內(nèi)容是靜態(tài)的，因此成為靜態(tài)博客框架．這類框架比較有名的有Hexo.這類框架的好處是對(duì)服務(wù)器要求簡單,不需要php和數(shù)據(jù)庫支持.但是比如文章評(píng)論等動(dòng)態(tài)改變網(wǎng)頁內(nèi)容的功能,在這種框架中生成的網(wǎng)頁中就無法實(shí)現(xiàn)了(事實(shí)上,如果一定要使用評(píng)論功能,可以使用Disque之類的第三方服務(wù)集成到Hexo生成的網(wǎng)站中來實(shí)現(xiàn)評(píng)論,原理還是利用第三方的服務(wù)商的數(shù)據(jù)庫和服務(wù)器來存放評(píng)論數(shù)據(jù))集晚。
3. 開始搭建
1. 環(huán)境安裝
- 安裝git
windows下使用msysGit
Git與Github使用教程（一）--Git安裝窗悯、Git賬戶與GitHub賬戶連接
Git與Github使用教程（二）--Windows下msysGit的使用 - 獲得github page網(wǎng)頁空間
注冊好GitHub賬號(hào)后，新建倉庫repository偷拔，倉庫名就設(shè)為：github-name.github.io蒋院。選擇public，新建成功莲绰。
建立好之后我們就已經(jīng)有了自己的網(wǎng)頁存放空間啦!今后通過
https://github-name.github.io就能訪問博客欺旧。
部署網(wǎng)頁的方法：
1、先clone我們的倉庫,然后修改其中的內(nèi)容(例如添加網(wǎng)頁刪除網(wǎng)頁等),最后commit + push到github上就可以了.這很麻煩,
2.蛤签、Hexo為我們提供了一鍵生成+發(fā)布的功能,今后連commit+push也可以省去啦,直接hexo deploy即可辞友。
官方教程網(wǎng)站：https://pages.github.com/
- 部署Hexo框架
Hexo需要部署在我們自己的計(jì)算機(jī)上,由于Hexo是基于Nodejs編寫的,所以我們首先需要安裝Nodejs
安裝參考地址：安裝Node.js
對(duì)于Windows系統(tǒng)，在Nodejs官網(wǎng)上下載并安裝Nodejs顷啼。
安裝完畢后在我們的電腦里建立一個(gè)新的文件夾來存放我們的博客工程文件,例如D:/hexo
在該文件夾里右鍵選擇git bash 打開命令行
使用npm安裝Hexo
npm install -g hexo #官方命令為：npm install -g hexo-cli
-g參數(shù)是要求全局安裝,這樣我們以后就可以直接在命令行里使用hexo命令了踏枣。
由于我們要提交到github上,我們還需要安裝hexo git提交插件.
npm install hexo-deployer-git --save
2. 初始化博客工程
hexo init <folder> # hexo會(huì)在目標(biāo)文件夾建立網(wǎng)站所需要的所有文件
cd <folder>
npm install # 安裝依賴包
上面的folder為博客的工程名,我們可以自己起,例如testBlog
完畢以后我們可以進(jìn)入我們之前初始化好的文件夾,例如D:/blog/testBlog中
,修改_config.yml文件來調(diào)整hexo的設(shè)置昌屉。
初始化好的文件夾內(nèi)容及各文件功能如下：
├── .deploy #需要部署的文件
├── node_modules #Hexo插件
├── public #生成的靜態(tài)網(wǎng)頁文件
├── scaffolds #模板
├── source #博客正文和其他源文件，404茵瀑、favicon间驮、CNAME 都應(yīng)該放在這里
| ├── _drafts #草稿
| └── _posts #文章
├── themes #主題
├── _config.yml #全局配置文件
└── package.json
3. 本地查看
現(xiàn)在我們已經(jīng)搭建起本地的hexo博客了，執(zhí)行以下命令：
hexo generate #生成靜態(tài)文件到public文件夾
hexo server #在本地服務(wù)器運(yùn)行
至此马昨，本地博客已經(jīng)搭建起來了竞帽，只是本地，別人看不到的鸿捧，瀏覽器輸入localhost:4000看看
要想從通過網(wǎng)站看需要部署到Github屹篓。
4. 修改_config.yml文件基礎(chǔ)配置調(diào)整hexo的設(shè)置
title: 這里填寫博客的標(biāo)題
subtitle: 這里填寫博客的副標(biāo)題
description: 這里填寫博客的描述
author: 這里填寫博客的作者
language: 這里填寫博客的語言,如果是中文填寫”zh”
url: 這里填寫我們之前申請的博客網(wǎng)頁存放空間的網(wǎng)址,例如我們的github用戶名為”aaa”,這里就填寫”http://aaa.github.io“
deploy:
type: 這里填寫”git”
repo: 這里填寫我們之前申請的git倉庫的地址,例如我們的用戶名為”aaa”,則此處填寫”git@github.com:aaa/aaa.github.io.git”
暫時(shí)就填寫這么多就夠了,其他的部分暫時(shí)先不做修改,保存,退出.如果需要了解更多hexo的配置或者想要做更高級(jí)的定制,可以查看官方配置說明
5. 部署到github
現(xiàn)在網(wǎng)站已經(jīng)基本建好了，可以部署到github上匙奴，使用命令：
hexo generate
hexo deploy
或者
hexo g -d
該命令的意思是使用hexo生成整個(gè)博客的網(wǎng)頁文件,并且上傳到我們剛才repo里面填寫的git倉庫里.hexo會(huì)自動(dòng)檢索我們博客文章的改動(dòng),刪除,增加,并生成一套新的網(wǎng)頁堆巧。
以下提示說明部署成功
[info] Deploy done: git
打開瀏覽器輸入網(wǎng)址：
http://你的github用戶名.github.io
即可訪問網(wǎng)頁。
6. 寫文章
git bash命令行模式,進(jìn)入我們的博客文件夾：
hexo new "標(biāo)題"
在 _posts 目錄下會(huì)生成文件 標(biāo)題.md
title: Hello World #文章頁面上的顯示名稱泼菌，可以任意修改谍肤，不會(huì)出現(xiàn)在URL中
date: 2015-07-30 07:56:29 #發(fā)表日期，一般不改動(dòng)
categories: hexo #文章分類目錄哗伯，多個(gè)分類使用[a,b,c]這種格式
tags: [hexo,github] #文章標(biāo)簽荒揣，多于一項(xiàng)時(shí)用這種格式
---
正文，使用Markdown語法書寫
<!--more-->
#more標(biāo)簽以下的內(nèi)容要點(diǎn)擊“閱讀全文”才能看見焊刹，#more標(biāo)簽以上的內(nèi)容為你首頁顯示文章的摘要部分
編寫好之后系任，保存退出，之后用hexo g -d生成網(wǎng)頁文件在部署到github上即可虐块。
