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部署到个人服务器, 就可以通过个人服务器访问了!

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