hexo搭建個(gè)人博客部署到個(gè)人服務(wù)器教程
本次以阿里云服務(wù)器為例探膊，詳細(xì)講解步驟：
一、本地環(huán)境【客戶端】
這里以本地的win10電腦為例
1.下載node，
默認(rèn)安裝塞耕，安裝完成之后，node -v看看版本號(hào)
2.安裝node(傻瓜式安裝,直接next就行)
安裝node非常簡(jiǎn)單,這里就不贅述了, 安裝完node環(huán)境后程癌，本地cmd運(yùn)行node -v查找是否安裝成功
3.安裝hexo
安裝完node環(huán)境后舷嗡，本地cmd運(yùn)行
npm install -g hexo-cli
然后hexo -v查看版本
4.hexo初始化
本地cmd執(zhí)行以下命令(目錄最好別放在C盤, 這個(gè)是博客的目錄文件,日后肯定很大)
我這里把博客目錄放在F盤
F盤創(chuàng)建blog文件后f:(進(jìn)入f盤) -> cd blog( 進(jìn)入blog文件夾),
這里教你個(gè)小技巧: 進(jìn)入文件夾, 在路徑上寫cmd敲個(gè)回車就是當(dāng)前文件夾的cmd路徑
執(zhí)行以下命令
hexo init
npm install
5.hexo配置
打開blog文件夾，首先打開package.json嵌莉，添加如下script
如下圖：特別注意1进萄、2兩個(gè)地方，現(xiàn)有的就更改锐峭，沒有的就增加
6.本地測(cè)試
執(zhí)行代碼npm run start或者hexo server開啟本地測(cè)試中鼠，打開瀏覽器，訪問localhost:4000打開hexo頁面
這里介紹一下hexo常用的命令
hexo generate //生成一套靜態(tài)網(wǎng)頁
hexo server //運(yùn)行測(cè)試,瀏覽器打開地址沿癞，http://localhost:4000
hexo deploy //進(jìn)行部署
hexo g == hexo generate //生成
hexo s == hexo server //啟動(dòng)服務(wù)預(yù)覽
hexo d == hexo deploy //部署
出現(xiàn)頁面就說明ok了!
7.本地電腦下載git
下載git,默認(rèn)安裝路徑,
git下載
安裝好git后一般右鍵就會(huì)有這個(gè)
8.更換next主題
當(dāng)然也可以用別的主題援雇， 不過博主更喜歡這個(gè)相對(duì)比較簡(jiǎn)潔，這里附上hexo的官網(wǎng)椎扬，選自己喜歡的主題
下載主題
git clone https://github.com/iissnan/hexo-theme-next themes/next
#下載主題到themes(別告訴我這個(gè)單詞你都不知道啥意思W(￣_￣)W) 文件夾下
下載可能比較久惫搏， 耐心等等。盗舰。晶府。。钻趋。川陆。
這里約定一下，別在下面搞混了
博客下的_config.yml文件我們叫做博客配置文件 (下圖)
next下的_config.yml文件我們叫做主題配置文件 (下圖)
接下來在博客配置文件中設(shè)置theme屬性(更換主題)
theme: next
9.修改博客配置內(nèi)容
在此只列出改動(dòng)的內(nèi)容
網(wǎng)站信息
# Site
title: 北歌 #網(wǎng)站標(biāo)題
subtitle: '驛路向北 百折不回' #二級(jí)標(biāo)題
description: '學(xué)習(xí)記錄 & 技術(shù)分享' #網(wǎng)站描述
keywords: '北歌,個(gè)人博客,beige' #關(guān)鍵詞(用于SEO)
author: Beige #作者
language: zh-CN #網(wǎng)站語言
timezone: 'Asia/Shanghai' #時(shí)區(qū)
遠(yuǎn)程部署
這里暫時(shí)可以不作修改, 現(xiàn)在本地配置好再上傳到服務(wù)器
deploy:
type: git
repo: git@your server_ip:/ your server Blog Directory
branch: master
開啟RSS訂閱
在配置文件末尾添加這下面內(nèi)容即可
#RSS訂閱
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '
開啟搜索功能
在配置文件末尾添加這下面內(nèi)容即可
# 搜索
search:
path: search.xml
field: post
format: html
limit: 10000
開啟站點(diǎn)地圖
先要制作網(wǎng)站的sitemap.xml文件, 說說什么是sitemap.xml文件: 這個(gè)文件能夠讓搜索引擎蜘蛛更多的爬取網(wǎng)站內(nèi)容蛮位，簡(jiǎn)單來說就是方便蜘蛛爬取较沪，方便了蜘蛛，就有加速收錄的過程失仁。所以對(duì)于一個(gè)小型網(wǎng)站來說尸曼，制作sitemap.xml是非常有必須的。
但是如何制作sitemap.xml文件呢萄焦？手工去敲寫控轿，那太麻煩了，而且還不一定做的好拂封。
北歌推薦使用SEO工具包快速制作sitemap.xml文件
1.下載愛站SEO工具包茬射，官網(wǎng): https://www.aizhan.com/reg.php?inviteCode=1305531
2.點(diǎn)擊網(wǎng)站地圖/sitemap模塊，進(jìn)入下一步冒签，這時(shí)候可能需要完成愛站網(wǎng)的注冊(cè)在抛。
3.點(diǎn)擊上圖選中的進(jìn)去后右上角添加網(wǎng)站，添加屬于你自己的網(wǎng)站信息
4.點(diǎn)擊右下角爬取萧恕，軟件就會(huì)開始自動(dòng)的爬取網(wǎng)站的過程刚梭，最后就會(huì)在相應(yīng)目錄下生成sitemap.xml文件
5.最后把該文件上傳至網(wǎng)站的根目錄下就可以了肠阱。大家看可以看看我的：http://www.beige.world/sitemap.xml
這里需要說明的是，如果你導(dǎo)出的是xml朴读，那么在導(dǎo)出的目錄下還會(huì)生成xsl文件屹徘，該文件也需要上傳網(wǎng)站根目錄，如果不想上傳該文件磨德，需要把xml文件的第二行刪除就可以正常顯示了缘回。
修改主題配置內(nèi)容
注意:修改的是next文件夾下的_config.yml文件
選取主題樣式
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
圖標(biāo)配置
圖標(biāo)可以在 網(wǎng)頁圖標(biāo)生成器 生成, 圖片存放路徑source/images文件夾下
favicon:
small: /images/favicon-16x16.png
medium: /images/favicon-32x32.png
apple_touch_icon: /images/apple-touch-icon.png
safari_pinned_tab: /images/safari-pinned-tab.svg
android_manifest: /images/manifest.json
ms_browserconfig: /images/browserconfig.xml
RSS 訂閱
安裝插件。
npm install hexo-generator-feed
開啟此向配置
RSS: /atom.xml || fa fa-rssxxxxxxxxxx RSS: /atom.xml || fa fa-rssrss:
菜單配置
下面的菜單可以根據(jù)自身選擇開啟與否
menu:
home: / || fa fa-home #主頁
about: /about/ || fa fa-user #關(guān)于
tags: /tags/ || fa fa-tags #標(biāo)簽
categories: /categories/ || fa fa-th #分類
archives: /archives/ || fa fa-archive #歸檔
#schedule: /schedule/ || fa fa-calendar #時(shí)刻表
sitemap: /sitemap.xml || fa fa-sitemap #站點(diǎn)地圖
#commonweal: /404/ || fa fa-heartbeat #公益404頁面
配置社交
可以自行添加典挑，選擇圖標(biāo), hexo中的圖標(biāo)來自這個(gè)網(wǎng)站
social:
GitHub: https://github.com/it-beige || fab fa-github
E-Mail: mailto:it_beige@163.com || fa fa-envelope
Weibo: https://weibo.com/yourname || fab fa-weibo
Google: https://plus.google.com/yourname || fab fa-google
Twitter: https://twitter.com/yourname || fab fa-twitter
FB Page: https://www.facebook.com/yourname || fab fa-facebook
#StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
#YouTube: https://youtube.com/yourname || fab fa-youtube
#Instagram: https://instagram.com/yourname || fab fa-instagram
#Skype: skype:yourname?call|chat || fab fa-skype
配置友鏈
links_settings:
icon: fa fa-book
title: 北歌
#Available values: block | inline
layout: block
側(cè)邊欄頭像
avatar:
url: /images/beige.jpg #頭像地址
rounded: true #是否圓形
rotated: true #鼠標(biāo)指向是否轉(zhuǎn)圈
文章瀏覽進(jìn)度
back2top:
enable: true
sidebar: true
scrollpercent: true
字?jǐn)?shù)統(tǒng)計(jì)
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: false
awl: 2
wpm: 275
贊賞
reward_settings:
enable: true
animation: false
comment: (*?▽?*)如果您覺得我的文章對(duì)您有幫助的話，不妨關(guān)注下博主的公眾號(hào)鴨(beige61)~
reward:
wechatpay: /images/weixinzhifu.png #你的微信收付款
alipay: /images/zhifubao.png #你的支付寶收付款
版權(quán)聲明
copyright: Beige All Rights Reserved.
備案信息
國(guó)內(nèi)網(wǎng)站需要添加備案信息啦吧。
beian:
enable: true
icp: 贛ICP備 20000394號(hào)-1 #請(qǐng)換成你自己的備案號(hào)
gongan_id: 20000394
gongan_num:
gongan_icon_url: /images/beian.png
站長(zhǎng)工具
可以改善搜索引擎優(yōu)化(SEO), 不懂可以google(hexo是用元標(biāo)簽的方式驗(yàn)證), 下面附上各大站長(zhǎng)工具官網(wǎng)
google_site_verification: ABCD...
google_analytics: UA-123456789-1
bing_site_verification: 10AA...
本地搜索
local_search:
enable: true
trigger: auto
top_n_per_article: 1
unescape: false
preload: false
關(guān)閉站點(diǎn)底部各種說明
# Powered by Hexo & NexT
powered: false
代碼塊樣式
可選的值:
normal/night/night eighties/night blue/night bright/solarized/solarized dark/galactic
highlight_theme: night
主題配置到此結(jié)束, 更多的配置可以看官網(wǎng)文檔, 下面來看看效果
本地配置好沒有問題之后, 開始將博客部署到個(gè)人服務(wù)器, 沒有個(gè)人服務(wù)器的可以選擇托管到gitHub上
二您觉、服務(wù)器(linux環(huán)境)配置
登錄到遠(yuǎn)程服務(wù)器, 以centos系統(tǒng)為例
- 登錄到遠(yuǎn)程服務(wù)器，推薦使用
Xshell 5 - 安裝 git (如果是LNMP集成環(huán)境應(yīng)該是有g(shù)it,可以不用重復(fù)安裝)
git --version // 如無授滓，則安裝
yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel perl-devel
yum install -y git
3.創(chuàng)建用戶并配置其倉(cāng)庫(kù)
useradd git
passwd git // 設(shè)置密碼
su git // 這步很重要琳水，不切換用戶后面會(huì)很麻煩
cd /home/git/
mkdir -p project/blog // 項(xiàng)目存在的真實(shí)目錄
mkdir repository && cd repository
git init --bare blog.git // 創(chuàng)建一個(gè)干凈的倉(cāng)庫(kù)
cd blog.git/hooks 切換到當(dāng)前目錄下
vi post-receive // 創(chuàng)建 hook 鉤子函數(shù)，輸入了內(nèi)容如下:
#!/bin/sh
git --work-tree=/home/git/projects/blog --git-dir=/home/git/repos/blog.git checkout -f
添加完畢后修改權(quán)限
chmod +x post-receive
exit // 退出到 root 登錄
chown -R git:git /home/git/repository/blog.git // 添加權(quán)限
4.建立ssh信任關(guān)系般堆，在本地電腦
ssh-copy-id -i C:/Users/你的用戶名/.ssh/id_rsa.pub git@你的服務(wù)器ip
ssh git@你的服務(wù)器ip // 測(cè)試能否登錄
搭建nginx服務(wù)器(集成環(huán)境的可跳過)
1.下載并安裝nginx
cd /usr/local/src
wget http://nginx.org/download/nginx-1.15.2.tar.gz
tar xzvf nginx-1.15.2.tar.gz
cd nginx-1.15.2
./configure
./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-file-aio --with-http_realip_module #配置 SSL 協(xié)議
make && make install
alias nginx='/usr/local/nginx/sbin/nginx' #為nginx取個(gè)別名
2.配置nginx文件
nginx -s stop #先停止nginx
cd /usr/local/nginx/conf
vi nginx.conf
修改 root 解析路徑
同時(shí)將 user 改為 root 如下圖在孝，不然nginx無法訪問 /home/git/project/blog
nginx -s reload #開啟nginx
能啟動(dòng)成功就說明ngnix配置完成, 服務(wù)器的環(huán)境全部搭建完成, 現(xiàn)在修改博客配置文件進(jìn)行鏈接現(xiàn)將博客部署到個(gè)人服務(wù)器上了!
deploy:
type: git
repo: git@你的服務(wù)器ip:/home/git/repository/blog.git
branch: master
配置好后執(zhí)行npm run deploy部署到個(gè)人服務(wù)器, 就可以通過個(gè)人服務(wù)器訪問了!
本人前端小白一枚，有錯(cuò)誤的話歡迎指正, 貼上 個(gè)人網(wǎng)站淮摔，建站初期私沮，歡迎您的光臨~
