阿超 > 新电脑搭建博客

新电脑搭建博客

2020-09-20

小技巧

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

昨天重装了电脑

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

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

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

image-20200920131654806

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

跳转到nodejs官网

image-20200920132012107

下载node12（14之后会报警告，虽然可以用，但警告看上去很烦。。。）

等待下载完成打开

下载慢的点我这个链接

一直下一步就好了

image-20200920142258016

到这里就对了

image-20200920142415234

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

image-20200920142516264

1
2
3
4
#查看node版本
node -v
#查看npm版本
npm -v

image-20200920142618893

然后下一步安装cnpm

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

image-20200920142834342

1
2
#查看版本
cnpm -v

image-20200920142903977

然后安装hexo

1
2
#安装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

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

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

image-20200920150045346

输入hexo init

image-20200920150208855

稍加等待

image-20200920150417908

我们再输入

1
2
#本地启动
hexo s

image-20200920150510253

进入localhost:4000

发现成功访问

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

注册帐号

image-20200920150926371

image-20200920150957502

创建仓库

image-20200920151349552

image-20200920152052259

把url复制下来

image-20200920152154628

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

image-20200920151117800

拉到最下面进行配置

一定要注意空格!!!

1
2
3
4
deploy:
  type: git
  repo: https://gitee.com/rubenhappyachao/rubenhappyachao.git
  branch: master

image-20200920152359825

然后别忘了Ctrl+S保存

输入hexo g

image-20200920152544713

先输入

1
2
#安装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

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

image-20200920154504279

下载完成后

1
cnpm install hexo-renderer-sass --save

image-20200920161009391

然后

1
cnpm install hexo-renderer-scss --save

image-20200920161045229

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

image-20200920161142766

然后进入_config.yml

粘贴

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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

修改配置文件其他部分

最终配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
# 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: /imgs/oss/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

最后输入

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

image-20200920161404377

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

image-20200920161642014

可以看到已经切换成功了

image-20200920161725115

我们新建一篇博客

1
hexo new "博客搭建"

image-20200920161836359

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

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

看我这篇博客就行

用typora+PicGo写博客

弄好了打开

image-20200920162354286

我们随便写点什么

image-20200920162501126

Ctrl+S保存

然后

1
2
hexo g
hexo d

image-20200920162554053

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

image-20200920162637516

image-20200920162726822

image-20200920162735435

image-20200920162748642

image-20200920162800168

image-20200920162810744

然后再访问一遍

image-20200920170256961

点进去看看，好没有问题

image-20200920170332889

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

就到这里啦~