hexo搭建个人博客部署到个人服务器(git+nginx+hexo+next)

本次以阿里云服务器为例，详细讲解步骤：

一、本地环境【客户端】

这里以本地的win10电脑为例

1.下载node，

默认安装，安装完成之后，node -v看看版本号

node下载

2.安装node(傻瓜式安装,直接next就行)

安装node非常简单,这里就不赘述了, 安装完node环境后，本地cmd运行node -v查找是否安装成功

3.安装hexo

安装完node环境后，本地cmd运行

npm install -g hexo-cli

然后hexo -v查看版本

4.hexo初始化

本地cmd执行以下命令(目录最好别放在C盘, 这个是博客的目录文件,日后肯定很大)

我这里把博客目录放在F盘

F盘创建blog文件后f:(进入f盘) -> cd blog( 进入blog文件夹),

这里教你个小技巧: 进入文件夹, 在路径上写cmd敲个回车就是当前文件夹的cmd路径

执行以下命令

hexo init
npm install

5.hexo配置

打开blog文件夹，首先打开package.json，添加如下script

如下图：特别注意1、2两个地方，现有的就更改，没有的就增加

6.本地测试

执行代码npm run start或者hexo server开启本地测试，打开浏览器，访问localhost:4000打开hexo页面

这里介绍一下hexo常用的命令

hexo generate           //生成一套静态网页
hexo server         //运行测试,浏览器打开地址，http://localhost:4000
hexo deploy         //进行部署
hexo g == hexo generate        //生成
hexo s == hexo server          //启动服务预览
hexo d == hexo deploy          //部署

出现页面就说明ok了!

7.本地电脑下载git

下载git,默认安装路径,

git下载

安装好git后一般右键就会有这个

8.更换next主题

当然也可以用别的主题，不过博主更喜欢这个相对比较简洁，这里附上hexo的官网，选自己喜欢的主题

hexo网址

下载主题

git clone https://github.com/iissnan/hexo-theme-next themes/next
#下载主题到themes(别告诉我这个单词你都不知道啥意思W(￣_￣)W) 文件夹下

下载可能比较久，耐心等等。。。。。。

这里约定一下，别在下面搞混了

博客下的_config.yml文件我们叫做博客配置文件 (下图)

next下的_config.yml文件我们叫做主题配置文件 (下图)

接下来在博客配置文件中设置theme属性(更换主题)

theme: next

9.修改博客配置内容

在此只列出改动的内容

网站信息

# Site
title: 北歌 #网站标题
subtitle: '驿路向北 百折不回' #二级标题
description: '学习记录 & 技术分享' #网站描述
keywords: '北歌,个人博客,beige' #关键词(用于SEO)
author: Beige #作者
language: zh-CN #网站语言
timezone: 'Asia/Shanghai' #时区

远程部署

这里暂时可以不作修改, 现在本地配置好再上传到服务器

deploy:
  type: git
  repo: git@your server_ip:/ your server Blog Directory
  branch: master

开启RSS订阅

在配置文件末尾添加这下面内容即可

#RSS订阅
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '

开启搜索功能

在配置文件末尾添加这下面内容即可

# 搜索
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

开启站点地图

先要制作网站的sitemap.xml文件, 说说什么是sitemap.xml文件: 这个文件能够让搜索引擎蜘蛛更多的爬取网站内容，简单来说就是方便蜘蛛爬取，方便了蜘蛛，就有加速收录的过程。所以对于一个小型网站来说，制作sitemap.xml是非常有必须的。

但是如何制作sitemap.xml文件呢？手工去敲写，那太麻烦了，而且还不一定做的好。

北歌推荐使用SEO工具包快速制作sitemap.xml文件

1.下载爱站SEO工具包，官网: https://www.aizhan.com/reg.php?inviteCode=1305531

2.点击网站地图/sitemap模块，进入下一步，这时候可能需要完成爱站网的注册。

3.点击上图选中的进去后右上角添加网站，添加属于你自己的网站信息

4.点击右下角爬取，软件就会开始自动的爬取网站的过程，最后就会在相应目录下生成sitemap.xml文件

5.最后把该文件上传至网站的根目录下就可以了。大家看可以看看我的：http://www.beige.world/sitemap.xml

这里需要说明的是，如果你导出的是xml，那么在导出的目录下还会生成xsl文件，该文件也需要上传网站根目录，如果不想上传该文件，需要把xml文件的第二行删除就可以正常显示了。

修改主题配置内容

注意:修改的是next文件夹下的_config.yml文件

选取主题样式

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

图标配置

图标可以在网页图标生成器生成, 图片存放路径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:

菜单配置

下面的菜单可以根据自身选择开启与否

menu:
  home: / || fa fa-home  #主页
  about: /about/ || fa fa-user #关于
  tags: /tags/ || fa fa-tags #标签
  categories: /categories/ || fa fa-th #分类
  archives: /archives/ || fa fa-archive #归档
  #schedule: /schedule/ || fa fa-calendar #时刻表
  sitemap: /sitemap.xml || fa fa-sitemap #站点地图
  #commonweal: /404/ || fa fa-heartbeat #公益404页面

配置社交

可以自行添加，选择图标, hexo中的图标来自这个网站

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

侧边栏头像

avatar:
  url: /images/beige.jpg #头像地址
  rounded: true #是否圆形
  rotated: true #鼠标指向是否转圈

文章浏览进度

back2top:
  enable: true
  sidebar: true
  scrollpercent: true

字数统计

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: (*╹▽╹*)如果您觉得我的文章对您有帮助的话，不妨关注下博主的公众号鸭(beige61)~
  reward:
  wechatpay: /images/weixinzhifu.png  #你的微信收付款
  alipay: /images/zhifubao.png #你的支付宝收付款

版权声明

copyright: Beige All Rights Reserved.

备案信息

国内网站需要添加备案信息。

beian:
    enable: true
    icp: 赣ICP备 20000394号-1  #请换成你自己的备案号
    gongan_id: 20000394
    gongan_num:
    gongan_icon_url: /images/beian.png

站长工具

可以改善搜索引擎优化(SEO), 不懂可以google(hexo是用元标签的方式验证), 下面附上各大站长工具官网

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

关闭站点底部各种说明

# Powered by Hexo & NexT
  powered: false

代码块样式

可选的值:
normal/night/night eighties/night blue/night bright/solarized/solarized dark/galactic
highlight_theme: night

主题配置到此结束, 更多的配置可以看官网文档, 下面来看看效果

本地配置好没有问题之后, 开始将博客部署到个人服务器, 没有个人服务器的可以选择托管到gitHub上

二、服务器(linux环境)配置

登录到远程服务器, 以centos系统为例

登录到远程服务器，推荐使用Xshell 5
安装 git (如果是LNMP集成环境应该是有git,可以不用重复安装)

git --version // 如无，则安装
yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel perl-devel
yum install -y git

3.创建用户并配置其仓库

useradd git
passwd git // 设置密码
su git // 这步很重要，不切换用户后面会很麻烦
cd /home/git/
mkdir -p project/blog // 项目存在的真实目录
mkdir repository && cd repository
git init --bare blog.git // 创建一个干净的仓库
cd blog.git/hooks 切换到当前目录下
vi post-receive // 创建 hook 钩子函数，输入了内容如下:
#!/bin/sh
git --work-tree=/home/git/projects/blog --git-dir=/home/git/repos/blog.git checkout -f

添加完毕后修改权限

chmod +x post-receive
exit // 退出到 root 登录
chown -R git:git /home/git/repository/blog.git // 添加权限

4.建立ssh信任关系，在本地电脑

ssh-copy-id -i C:/Users/你的用户名/.ssh/id_rsa.pub git@你的服务器ip
ssh git@你的服务器ip // 测试能否登录

搭建`nginx`服务器(集成环境的可跳过)

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 协议
make && make install
alias nginx='/usr/local/nginx/sbin/nginx' #为nginx取个别名

2.配置nginx文件

nginx -s stop #先停止nginx
cd /usr/local/nginx/conf
vi nginx.conf
修改 root 解析路径
同时将 user 改为 root 如下图，不然nginx无法访问 /home/git/project/blog
nginx -s reload #开启nginx

能启动成功就说明ngnix配置完成, 服务器的环境全部搭建完成, 现在修改博客配置文件进行链接现将博客部署到个人服务器上了!

deploy:
  type: git
  repo: git@你的服务器ip:/home/git/repository/blog.git
  branch: master

配置好后执行npm run deploy部署到个人服务器, 就可以通过个人服务器访问了!

本人前端小白一枚，有错误的话欢迎指正, 贴上个人网站，建站初期，欢迎您的光临~