此篇着重讲述如何使用hexo进行个人博客编写上传… 没有搭建好环境的童鞋请移动至此 —– Hexo建站总结—个人博客建站基础篇
****继上篇开始~:****
基础篇搭建完成后的小伙伴肯定有在为如何让自己的博客长久的在服务器上运行而头疼,现在在这里先介绍如何让自己的hexo博客在服务器后台运行~
****1.用pm2管理进程让 hexo 博客在服务器后台跑起来**
1,安装pm2
npm install -g pm2
2,编写一个执行脚本 —— 在博客根目录下创建一个文件 run.js
cd /usr/local/src/myblog
vim run.js
##添加如下内容:
const { exec } = require('child_process')
exec('hexo server -p 你的端口',(error, stdout, stderr) => {
if(error){
console.log('exec error: ${error}')
return
}
console.log('stdout: ${stdout}');
console.log('stderr: ${stderr}');
})
3,使用pm2运行脚本 run.js
cd /usr/local/src/myblog
指令: pm2 start run.js
运行起来后可以使用pm2 show + 进程pid查看后台hexo进行
2.选择自己的hexo主题,并修改相关配置
笔者这里选择的是hexo-theme-yilia-plus这个主题,接下去教你如何使用个性化主题
1. 进入hexo建站时的根目录下的themes文件夹
cd /usr/local/src/hexo/hanyubolg/themes/
2. clone 你想要的主题链接，然后在themes文件夹下会出现这个主题相关的文件夹
git clone https://github.com/JoeyBling/hexo-theme-yilia-plus.git
这个是hexo官方提供的主题库,可自由选择
3. 接下来修改hexo-theme-yilia-plus文件夹中的_config.yml配置,将你的个人配置替换上即可,下面贴上配置
cd hexo-theme-yilia-plus/
vim _config.yml
# Header-菜单
menu:
主页: /
技术笔记: https://a956551943.github.io/
Java: /tags/Java/
# subNav-子导航
subNav:
- github: "https://github.com/a956551943" # (支持设置多个)
- gitee: "https://gitee.com/weixiansen" # 码云
- jianshu: "https://www.jianshu.com/u/c09d4d51339b" #简书
# - cnblog: "#"
# - blog: "#"
# - csdn: "#"
# - rss: "#"
# - zhihu: "#"
- qq: "img/956551943.jpg"
# - weixin: "img/weixin_.png"
# - weibo: "#"
# - douban: "#"
# - segmentfault: "#"
# - bilibili: "#"
# - acfun: "#"
# - mail: "mailto:zhousiwei0911@qq.com"
# - facebook: "#"
# - google: "#"
# - twitter: "#"
# - linkedin: "#"
# 悬停预览图片效果
hover_effect:
## `global` 0: Set separately, 1: Enable global 2: Close global
## `global` 0: 分开设置, 1: 全局启用, 2: 全局关闭
global: 2
# SubNav-导航
subNav: true
# RSS订阅(关于如何配置启用:https://www.jianshu.com/p/2aaac7a19736)
rss: /atom.xml
# 是否需要修改 root 路径
# 如果您的网站存放在子目录中，例如 http://yoursite.com/blog，
# 请将您的 url 设为 http://yoursite.com/blog 并把 / 设为 /blog/。
# 新版本已弃用，请在博客根目录文件进行配置
# root: /
# Content
# 文章太长，截断按钮文字(在需要截断的行增加此标记：<!--more-->)
excerpt_link: more
# 文章卡片右下角常驻链接，不需要请设置为false
show_all_link: '展开全文'
# 数学公式
mathjax: false
# Open link in a new tab | 是否在新窗口打开链接
open_in_new:
article: true # 文章链接
menu: true # 导航菜单
subNav: true # 子菜单
# 打赏
# 打赏type设定：0-关闭打赏； 1-文章对应的md文件里有reward:true属性，才有打赏； 2-所有文章均有打赏
reward_type: 2
# 打赏wording
reward_wording: '谢谢你请我吃糖果'
# 支付宝二维码图片地址，跟你设置头像的方式一样。比如：/assets/img/alipay.jpg
alipay: /img/alipay.jpg
# 微信二维码图片地址
weixin: /img/weixin.png
# 目录
# 目录设定：0-不显示目录； 1-文章对应的md文件里有toc:true属性，才有目录； 2-所有文章均显示目录
toc: 1
# 根据自己的习惯来设置，如果你的目录标题习惯有标号，置为true即可隐藏hexo重复的序号；否则置为false
toc_hide_index: true
# 目录为空时的提示
toc_empty_wording: '目录，不存在的…'
# 是否有快速回到顶部的按钮
top: true
# Miscellaneous
# 百度统计
baidu_analytics: ''
google_analytics: ''
# 网站图标
favicon: /favicon.ico
# 你的头像url
avatar: /img/head.jpg
# 是否开启分享
share_jia: true
# 评论：1、畅言；2、Disqus；3、Gitment；4、Giteement
# 不需要使用某项，直接设置值为false，或注释掉
# 具体请参考wiki：https://github.com/JoeyBling/hexo-theme-yilia-plus/wiki
# 1、畅言
changyan_appid: false
changyan_conf: false
# 2、Disqus 在hexo根目录的config里也有disqus_shortname字段，优先使用yilia-plus的
disqus: false
# 3、Gitment----基于GitHub的评论系统(关闭请设置gitment_owner为false)
# 关于如何集成:https://www.jianshu.com/p/ac7658cc912f
gitment_owner: false #你的 GitHub ID
# 是否使用官方js(false可以提升访问速度，本地修改过一部分的js，官方js可能会出现服务器不稳定，不太建议使用)
gitment_remote: false
gitment_repo: '' #存储评论的 repo name(需要在Github创建)
gitment_oauth:
client_id: '' #client ID
client_secret: '' #client secret
# 4、Giteement----【国内用户建议使用这个，相对比较快】
# 关于如何集成:https://www.jianshu.com/p/f5c4633524c7
# 基于码云的评论系统(https://gitee.com/zhousiwei/giteement)
giteement:
enable: false # 是否启用码云评论系统
# 是否使用官方js(false可以提升访问速度)
remote: false
redirect_uri: '' # 应用回调地址(请和配置的第三方应用保持一致)
# 不能更改(网上开源项目`https://github.com/Rob--W/cors-anywhere`作者提供的专门用来跨域服务器的配置)
oauth_uri: https://cors-anywhere.herokuapp.com/https://gitee.com/oauth/token
giteeID: '' # 你的码云账号英文名
# 存储评论的 repo name(需要在码云仓库创建公开仓库)
repo: ''
gitment_oauth:
client_id: '' #client ID
client_secret: '' #client secret
# 访问量统计功能(不蒜子)
busuanzi:
enable: true
site_visit: true # 站点访问量显示
article_visit: true # 文章访问量显示
# 网易云音乐插件
music:
enable: false
# 播放器尺寸类型(1：长尺寸、2：短尺寸)
type: 2
#id: 1334445174 # 网易云分享的音乐ID(更换音乐请更改此配置项)
autoPlay: true # 是否开启自动播放
# 提示文本(关闭请设置为false)
text: '这似乎是首纯音乐，请尽情的欣赏它吧！'
# 页面点击小红心
clickLove:
# (关闭请设置为false)
enable: true
# GitHub Ribbons(https://github.blog/2008-12-19-github-ribbons/)
github:
# (关闭请设置为false)
url: https://github.com/JoeyBling/hexo-theme-yilia-plus
# 页脚 Litten(此配置项已弃用)
# 帮助我们让更多人可以更方便使用Hexo，请尽量不要修改此主题配置
pageFooter:
litten: GitHub:<a href="https://github.com/JoeyBling/hexo-theme-yilia-plus" target="_blank">hexo-theme-yilia-plus</a>
# 开启百度站长平台自动推送(https://ziyuan.baidu.com/linksubmit/index)
baidu_push: false
# 版权声明
# 版权声明type设定：0-关闭版权声明； 1-文章对应的md文件里有copyright: true属性，才有版权声明； 2-所有文章均有版权声明
copyright_type: 2
# 版权声明自定义文本(关闭请设置为false)
copyright_text:
# 网站成立年份(默认为 2018，若填入年份小于当前年份，则显示为 2018-2019 类似的格式)
since: 2021
# Progress Bar | 页面加载进度条
# Demo: http://github.hubspot.com/pace/docs/welcome/
# type: barber-shop|big-counter|bounce|center-atom|center-circle|
# center-radar|center-simple|corner-indicator|flash|flat-top|
# loading-bar|mac-osx|minimal
# color: black|blue|green|orange|pink|purple|red|silver|white|yellow|
progressBar:
enable: false
type: 'minimal' # Keep Quotes | 保留引号避免出错(某些type会导致样式重叠排版错误)
color: blue
# Apple Touch icon 苹果图标(关闭请设置为false)
apple_touch_icon: '/apple-touch-icon-180x180.png'
# Tab Title Change | 标签页标题切换
tab_title_change:
enable: true
left_tab_title: '(つェ⊂) 我藏好了哦~ '
return_tab_title: '(*´∇｀*) 被你发现啦~ '
# https://github.com/willin/hexo-wordcount
# 是否开启字数统计(关闭请设置enable为false)
# 也可以单独在md文件里Front-matter设置`no_word_count: true`属性，来自定义关闭字数统计
word_count:
enable: true
# 只在文章详情显示(不在首页显示)
only_article_visit: true
# 文字输入特效
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
enable: true
# 使输入模式丰富多彩
colorful: true
# 是否开启摇动
shake: false
# 飘雪特效
# https://github.com/MlgmXyysd/snow.js
snow: false
# 看板娘动态模型插件
## https://github.com/JoeyBling/live2d-widget.js
live2d:
# (关闭请设置为false)
enable: false
# 模型名称(取值请参考：https://github.com/JoeyBling/hexo-theme-yilia-plus/wiki/live2d%E6%A8%A1%E5%9E%8B%E5%8C%85%E5%B1%95%E7%A4%BA)
model: hibiki
display:
position: right # 显示位置：left/right(default: 'right')
width: 145 # 模型的长度(default: 150)
height: 315 # 模型的高度(default: 300)
hOffset: 50 # 水平偏移(default: 0)
#vOffset: -20 # 垂直偏移(default: -20)
mobile:
show: false # 是否在移动设备上显示(default: true)
scale: 0.6 # 移动设备上的缩放(default: 0.5)
react:
opacity: 0.8 # 模型透明度(default: 0.7)
# 样式定制 - 一般不需要修改，除非有很强的定制欲望…
style:
# 头像上面的背景颜色
# header: '#D3D1DC'
header: '#4d4d4d'
gif:
# 是否启用左侧边栏动态图效果
enable: false
# 自定义背景图路径(默认可以不设置，提供默认背景图)
# path: /img/biubiubiu.gif
# 右滑板块背景
slider: 'linear-gradient(200deg,#a0cfe4,#e8c37e)'
# slider的设置
slider:
# 是否默认展开tags板块
showTags: false
# 智能菜单
# 如不需要，将该对应项置为false
# 比如
#smart_menu:
# friends: false
smart_menu:
innerArchive: '所有文章'
friends: '友链'
aboutme: '关于我'
# 友情链接
friends:
技术笔记: #网站名称
#网站地址
url: https://gitee.com/weixiansen/SpringCloud_Sell
#网站图片(可忽略不写)
img:
#网站简介(可忽略不写)
description: 记录工作和学习过程中的笔记：Java、前端开发、Hexo博客、聚合支付、Linux笔记、ElasticSearch、ELK日志分析
GitHub:
url: https://github.com/a956551943
码云:
url: https://gitee.com/weixiansen
简书:
url: https://www.jianshu.com/u/c09d4d51339b
CSDN:
url: https://blog.csdn.net/weixin_41256398
# 关于我
aboutme: 主要涉及技术：<br>Java后端开发、分布式、<br>爱coding、源码追溯者、计算机网络<br><br>联系QQ:956551943<br><br>思考<br><br>一点一滴的积累都值得记录<br>谢谢大家
这里要特别说明一下: menu中的自定义侧边栏链接访问标签需要修改站点根目录下的_config.yml文件添加相关标签，并且需要在文章中添加相应标签,例如本文开头标签.
笔者在站点根目录下的_config.yml配置如下:
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: Hanyu bolg
subtitle: 'record everything for life'
description: 'record everything for life'
keywords: 计算机,算法,Java
author: Han yu
language: en
timezone: ''
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://www.hanyu.fit
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
enable: true # Open external links in new tab
field: site # Apply to the whole site
exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace: ''
wrap: true
hljs: false
prismjs:
enable: false
preprocess: true
line_number: true
tab_replace: ''
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 10
order_by: -date
# Category & Tag
default_category: uncategorized
category_map: [Java,计算机组成原理,计算机网络,操作系统,数据结构与算法]
tag_map: [Java,分布式,高并发,JVM]
# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true
# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'
# Pagination
## Set per_page to 0 to disable pagination
per_page: 5
pagination_dir: page
# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-yilia-plus
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
#deploy:
# type: ''
deploy:
type: git
repo: https://github.com/a956551943/a956551943.github.io.git
# example, https://github.com/hexojs/hexojs.github.io
branch: master
# JsonContent
jsonContent:
meta: false
pages: false
posts:
title: true
date: true
path: true
text: false
raw: false
content: false
slug: false
updated: false
comments: false
link: false
permalink: false
excerpt: false
categories: false
tags: true
配上文章开头标签:
title: Hello World
categories: #分类
- Java
tags: #标签
- Java
4. 下面重点来了~~如何编写博客并上传更新
####由于hexo只支持markdown文件格式,因此.这里提供两种方式,一种是离线编写(下载markdown),一种是在线编写(markdown在线编辑器),笔者在这使用的是在线编写工具,
1,在线编写工具使用
1.进入csdn官方网站 ------ [点此进入官网](https://www.csdn.net/)
2.注册账号 (这里就不多说了,这个注册账号还是很简单的)
3.在首页右上角找到相应图标 --- 写博客 4.然后将你想要写的博客内容按照自己喜欢的格式排版编写即可(具体如何使用工具要大家自己摸索,很简单,相比word简单多了)
5.最后,在页面右侧有两个按钮,一个是导出为Markdown文件,一个是导出为HTML文件---选择markdown文件即可,保存到本地自定义位置....
2.在自己的服务器上部署博客并发布更新至github
1.将我们生成的markdown文件上传至服务器的 hexo根目录 source/_posts 文件夹中
完整路径为: /usr/local/src/myblog/source/_posts
2.依次执行(此为发布至github的操作)
hexo clean //清除缓存,建议更新代码前都执行下此操作。
hexo generate //生成静态文章，可以用 hexo g缩写
hexo deploy //部署文章，可以用hexo d缩写
3.服务器重新运行hexo
hexo s
