hexo搭建个人博客部署到个人服务器教程
本次以阿里云服务器为例，详细讲解步骤：
一、本地环境【客户端】
这里以本地的win10电脑为例
1.下载node，
默认安装，安装完成之后，node -v看看版本号
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的官网，选自己喜欢的主题
下载主题
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部署到个人服务器, 就可以通过个人服务器访问了!
本人前端小白一枚，有错误的话欢迎指正, 贴上 个人网站，建站初期，欢迎您的光临~
