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

一、本地环境【客户端】

这里以本地的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网站站长工具

Yandex网站管理员工具

Bing网站管理员工具

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系统为例

  1. 登录到远程服务器,推荐使用Xshell 5
  2. 安装 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部署到个人服务器, 就可以通过个人服务器访问了!

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

hexo搭建个人博客部署到个人服务器(git+nginx+hexo+next)的更多相关文章

  1. 使用Hexo搭建个人博客并部署到GitHub或码云上全过程

    一.前言 如上图所示:GitHub有Github Pages,而码云也有码云 Pages 1.Github Pages或Gitee Pages是什么呢? Github Pages或者Gitee Pag ...

  2. Linux下使用 github+hexo 搭建个人博客02-hexo部署到Github Pages

    之前的这篇文章<Linux下使用 github+hexo 搭建个人博客01-hexo搭建>,相信大家都知道怎么搭建 hexo ,怎么切换主题,并且完成了一篇博文的创建,以及 MarkDow ...

  3. 利用Hexo搭建个人博客-博客发布篇

    通过 <利用Hexo搭建个人博客-环境搭建篇> 以及 <利用Hexo搭建个人博客-博客初始化篇>,我们了解到了利用Hexo搭建个人博客需要的环境以及配置,下面这篇文章将会介绍如 ...

  4. 利用Hexo搭建个人博客-博客初始化篇

    上一篇博文 <利用Hexo搭建个人博客-环境搭建篇> 中,我们讲解了利用Hexo搭建个人博客应该要配置哪些环境.相信大家已经迫不及待的想要知道接下来应该要怎么把自己的博客搭起来了,下面,让 ...

  5. 利用Hexo搭建个人博客-环境搭建篇

    我是一个爱写博客进行总结分享的人.然而,有着热爱写博客并且深知写博客好处的我,却没有好好的把这个习惯坚持下来.如今毕业已经一年多了吧,每一次与师弟师妹们聊天,我总会意味深长的建议他们,一定要定期梳理总 ...

  6. 使用Hexo搭建github博客步骤,超简便

    categories: 工具 tags: git Windows 搭建博客 你只需要node环境和一个github账号就可以开工啦! 本教程适合于Windows环境,Mac教程也大同小异 利用hexo ...

  7. hexo搭建个人博客

    本文讲述如何用`hexo`搭建个人博客,并托管到`github`.不需要租赁服务器,可完成网站博客的搭建. 安装Hexo安装hexo之前,要先下载安装Node.js和Git,百度搜索找到下载即可.[G ...

  8. 使用github和hexo搭建静态博客

    获得更多资料欢迎进入我的网站或者 csdn或者博客园 终于写这篇文章了,这是我使用github和hexo搭建博客的一些心得,希望能给大家一点帮助.少走点弯路.刚接触github,只是用来存项目的版本, ...

  9. Linux下使用 github+hexo 搭建个人博客07-next主题接入搜索和站点管理

    这是搭建个人博客系统系列文章的最后一篇,如果你是从第一篇一路跟下来的,那么恭喜你,即将完成整个博客网站的搭建.OK,话不多说,开始我们的收官之战. 不知你想过没有,如果我们的文章少,一眼看完整个目录, ...

随机推荐

  1. react中路由不起作用的奇怪现象

    同样的两段Router代码,为什么一段正常,一段不起作用(也没有任何错误log提示) 瞪着眼观察也看不出为什么... 通过选中高亮显示内容相同, 为何就是有一段路由不管用呢? 折腾半天发现... 大小 ...

  2. 使用PInvoke互操作,让C#和C++愉快的交互优势互补

    一:背景 1. 讲故事 如果你常翻看FCL的源码,你会发现这里面有不少方法借助了C/C++的力量让C#更快更强悍,如下所示: [DllImport("QCall", CharSet ...

  3. css:选择器(标签、类、ID、通配符)

    1.css概述 主要的使用场景就是美化网页,布局页面 (1)html的局限性 它只关注内容的语义,只能做一些简单的样式,并且非常的臃肿和繁琐 (2)css对网页美化的作用 css是层叠样式表的简称,它 ...

  4. 基于nodejs+express+mysql+webstorm+html的 增删改查

    一.工具准备 Nodejs框架,WebStorm.Mysql服务.Navicat.此篇文章只讲项目的搭建过程,至于Nodejs,WebStorm.Mysql的下载.安装与配置网上资源很多,请自行查阅, ...

  5. mybatis精讲(七)--动态sql

    目录 常用标签 if元素 choose元素 trim元素 forearch bind元素 在我们传统的开发中我们会通过拼接sql达到数据库的操作.java中的拼接不仅效率低下而且代码很长不易维护.而M ...

  6. Rocket - util - Replacement

    https://mp.weixin.qq.com/s/zCP7wPuxgQ-r94Tr6BV5iw   简单介绍Replacement的实现.   ​​   1. 基本介绍   用于实现Cache替换 ...

  7. MyBatis(二)参数传递和自定义结果集

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.myBatis的注解使用方式 package com.webcode.mapper; import ...

  8. Java实现 蓝桥杯VIP 基础练习 回形取数

    问题描述 回形取数就是沿矩阵的边取数,若当前方向上无数可取或已经取过,则左转90度.一开始位于矩阵左上角,方向向下. 输入格式 输入第一行是两个不超过200的正整数m, n,表示矩阵的行和列.接下来m ...

  9. Java实现 LeetCode 350 两个数组的交集 II(二)

    350. 两个数组的交集 II 给定两个数组,编写一个函数来计算它们的交集. 示例 1: 输入: nums1 = [1,2,2,1], nums2 = [2,2] 输出: [2,2] 示例 2: 输入 ...

  10. Java实现 蓝桥杯VIP 算法训练 数组查找及替换问题

    描述 给定某整数数组和某一整数b.要求删除数组中可以被b整除的所有元素,同时将该数组各元素按从小到大排序.如果数组元素数值在A到Z的ASCII之间,替换为对应字母.元素个数不超过100,b在1至100 ...