如果你希望在年老时受人爱戴,那麽在你年轻之时就应待人有礼。——黎里

昨天重装了电脑

不如复习一遍hexo博客搭建,也给大伙整点活

现在这台电脑开发环境也没装,那么从头开始搭一把

首先准备一台能联网的电脑

image-20200920131654806

打开浏览器,IE浏览器也行

跳转到nodejs官网

image-20200920132012107

下载node12(14之后会报警告,虽然可以用,但警告看上去很烦。。。)

等待下载完成打开

下载慢的点我这个链接

一直下一步就好了

image-20200920142258016

到这里就对了

image-20200920142415234

然后Win+R打开命令行输入cmd打开控制台

image-20200920142516264

#查看node版本
npde -v
#查看npm版本
npm -v

image-20200920142618893

然后下一步安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

image-20200920142834342

#查看版本
cnpm -v

image-20200920142903977

然后安装hexo

#安装hexo-cli
cnpm install hexo-cli -g

image-20200920143139193

然后是下载git

git官网下载

image-20200920145016694

说实话下载是真的慢。。。

image-20200920145149500

建议是从腾讯的软件管理中去下载,这个下载的快

image-20200920145227088

瞬间就好了

image-20200920145310125

一直点击next

image-20200920145618325

image-20200920145726130

我们这时候创建一个目录

image-20200920144146674

双击进去,右键git bash here

image-20200920145812023

先配置一下用户名、邮箱什么的吧

#设置用户名
git config --global user.name "username"
#设置邮箱
git config --global user.email useremail@qq.com

image-20200920150045346

输入hexo init

image-20200920150208855

稍加等待

image-20200920150417908

我们再输入

#本地启动
hexo s

image-20200920150510253

进入localhost:4000

发现成功访问

接下来是部署,这里介绍gitee部署方式

注册帐号

image-20200920150926371

image-20200920150957502

创建仓库

image-20200920151349552

image-20200920152052259

url复制下来

image-20200920152154628

来到我们的博客目录,找到_config.yml

image-20200920151117800

拉到最下面进行配置

一定要注意空格!!!

deploy:
type: git
repo: https://gitee.com/rubenhappyachao/rubenhappyachao.git
branch: master

image-20200920152359825

然后别忘了Ctrl+S保存

输入hexo g

image-20200920152544713

先输入

#安装git插件
cnpm install --save hexo-deployer-git

image-20200920152954648

再输入hexo d

输入用户名和密码,点击确定,注意别输入错了,错了的话得去控制面板里的凭据管理中删除

image-20200920153108956

这样就成功了

image-20200920153139225

刷新仓库

image-20200920153213644

我们点击右边的服务,选择Gitee Pages

image-20200920153243553

对了,需要先绑定手机号哦~

image-20200920153400527

image-20200920153541031

然后回到刚才的页面刷新一下,发现已经没有提示了

点击启动

image-20200920153635053

好了之后

image-20200920153709550

点击网址进去

发现成功访问

image-20200920153728340

我们这时候来更改主题吧

首先挑选一个主题

主题挑选网址

比如我现在用的这个

image-20200920154044816

跟着说明一步一步走,不同的主题配置方式可能略微不同

image-20200920154301873

git clone https://github.com/ZEROKISEKI/hexo-theme-gal.git themes/gal

image-20200920154504279

下载完成后

cnpm install hexo-renderer-sass --save

image-20200920161009391

然后

cnpm install hexo-renderer-scss --save

image-20200920161045229

cnpm install hexo-generator-json-content --save

image-20200920161142766

然后进入_config.yml

粘贴

jsonContent:
dateFormat: MM-DD
pages:
title: true
text: true
path: true
date: true
excerpt: true
preview: true
posts:
title: true
text: true
path: true
date: true
excerpt: true
tags: [{
name: tag.name,
slug: tag.slug,
permalink: tag.permalink
}]
preview: true

并且修改主题为gal,保存

image-20200920161554916

修改配置文件其他部分

最终配置文件

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 阿超
subtitle: ''
description: '​ 我的名字叫阿超,19岁。住在华府大道的住宅区一带,未婚。我在一家普通公司做java开发。每天都要加班到晚上9点才能回家。我不抽烟,酒仅止于浅尝。晚上12点睡,每天要睡足8个小时。睡前,我一定看半小时《JOJO的奇妙冒险》漫画,然后做50个仰卧起坐,上了床,马上熟睡。一觉到天亮,决不把疲劳和压力,留到第二天。医生都说我很正常。'
keywords:
author: 阿超
language: zh-CN
timezone: ''

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://rubenhappyachao.gitee.io/
root: /
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

# 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:
tag_map:

# 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
## Use post's date for updated date unless set in front-matter
use_date_for_updated: false

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
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: gal

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://gitee.com/rubenhappyachao/rubenhappyachao.git
branch: master
#
#
#
#
#
#
# Header
menu:
Home: /
Archives: /archives
Categories: /categories
Tags: /tags
rss: /atom.xml

# Content
excerpt_link: Read More
fancybox: true

# Sidebar
sidebar: left
widgets:
- nav
- about

# display widgets at the bottom of index pages (pagination == 2)
index_widgets:
# - category
# - tagcloud
# - archive

# widget behavior
archive_type: 'monthly'
show_count: false

# Miscellaneous
google_analytics:
favicon: /favicon.png
twitter:
google_plus:
fb_admins:
fb_app_id:


# GalMenu - PC端右键调出,移动端长按
# galmenu决定是否开启
# mp3play决定是否开启音效
galmenu: true
mp3play: false
gaymenu_item:
- name: 首页
url : /
- name: 标签
url : /tags
- name: 分类
url : /categories
- name: 归档
url : /archives
- name: xxx
url : xxxxxxxxx
- name: xxxx
url : xxxxxxx

# 社交链接
social:
- url: http://github.com/ShanaMaid
name: Github

# 友情链接
# name : url
link_title: 友情链接
links:
ShanaMaid: https://www.baidu.com/s?wd=%E5%A6%82%E4%BD%95%E4%BA%A4%E6%9C%8B%E5%8F%8B&rsv_spt=1&rsv_iqid=0xeded6b3100005af5&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=tb&rsv_sug3=19&rsv_sug1=8&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&inputT=3914&rsv_sug4=9210


# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site directory(source/uploads): /uploads/avatar.jpg
# 头像
avatar: https://waibi.oss-cn-chengdu.aliyuncs.com/2020-06-01/head.jpg


# 网站统计
# 站长统计 填写id
# eg: 
# CNZZ: 123456789
CNZZ:

# 评论
# 评论
# 友言uid
uyan:

# leadcloud访问次数统计
#
leancloud_visitors:
enable: false
app_id:
app_key:
#
#
#
# hexo/_config.yml
markdown_it_plus:
highlight: true
html: true
xhtmlOut: true
breaks: true
langPrefix:
linkify: true
typographer:
quotes: “”‘’
pre_class: highlight
# 搜索
search:
path: search.xml
field: post
format: html
limit: 10000
#gal主题配置
jsonContent:
dateFormat: MM-DD
pages:
title: true
text: true
path: true
date: true
excerpt: true
preview: true
posts:
title: true
text: true
path: true
date: true
excerpt: true
tags: [{
name: tag.name,
slug: tag.slug,
permalink: tag.permalink
}]
preview: true

image-20200920163709747

最后输入

hexo new page "search"              // 搜索功能的必须步骤
hexo new page "404" // 开启404页面

image-20200920161404377

我们可以测试一下了,输入hexo s本地运行一下

image-20200920161642014

可以看到已经切换成功了

image-20200920161725115

我们新建一篇博客

hexo new "博客搭建"

image-20200920161836359

到目录下的source->_posts下就看到我们刚刚新建的md文件了

我们这时候安装typora并和picgo整合

看我这篇博客就行

typora+PicGo写博客

弄好了打开

image-20200920162354286

我们随便写点什么

image-20200920162501126

Ctrl+S保存

然后

hexo g
hexo d

image-20200920162554053

完成后我们再去gitee中点一下部署

image-20200920162637516

image-20200920162726822

image-20200920162735435

image-20200920162748642

image-20200920162800168

image-20200920162810744

然后再访问一遍

image-20200920170256961

点进去看看,好没有问题

image-20200920170332889

如果样式崩了或者其他问题什么的,看看控制台报错没有,或者配置文件写错没有

就到这里啦~