-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path29344.html
595 lines (548 loc) · 54.1 KB
/
29344.html
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
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>从零开始搭建个人博客 | magic-H</title><meta name="keywords" content="Blog"><meta name="author" content="magic-H"><meta name="copyright" content="magic-H"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="1.简介 曾经有位老师说过：“希望我们不要沦落到用简历找工作”，对于程序员来说个人博客当然是最好展示自己的能力的平台。（某圈装13专用） 本次需要使用的软件及网站（点击即可下载）： VPN（为了网站的持久运行，不敢放链接） Tips：如果出现timeout , 下载速度慢都可以使用VPN Git Node Github（请确保你有VPN） Typora（用于博客的编写，建议安装完后主动">
<meta property="og:type" content="article">
<meta property="og:title" content="从零开始搭建个人博客">
<meta property="og:url" content="https://magic-h.top/29344.html">
<meta property="og:site_name" content="magic-H">
<meta property="og:description" content="1.简介 曾经有位老师说过：“希望我们不要沦落到用简历找工作”，对于程序员来说个人博客当然是最好展示自己的能力的平台。（某圈装13专用） 本次需要使用的软件及网站（点击即可下载）： VPN（为了网站的持久运行，不敢放链接） Tips：如果出现timeout , 下载速度慢都可以使用VPN Git Node Github（请确保你有VPN） Typora（用于博客的编写，建议安装完后主动">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://s4.ax1x.com/2022/02/19/HHwzEq.png">
<meta property="article:published_time" content="2022-02-19T00:00:00.000Z">
<meta property="article:modified_time" content="2023-06-09T02:57:26.202Z">
<meta property="article:author" content="magic-H">
<meta property="article:tag" content="Blog">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://s4.ax1x.com/2022/02/19/HHwzEq.png"><link rel="shortcut icon" href="/img/favicon.ico"><link rel="canonical" href="https://magic-h.top/29344"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//sdk.51.la"/><link rel="preconnect" href="//fonts.googleapis.com" crossorigin=""/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css" media="print" onload="this.media='all'"><script>!function(p){"use strict";!function(t){var s=window,e=document,i=p,c="".concat("https:"===e.location.protocol?"https://":"http://","sdk.51.la/js-sdk-pro.min.js"),n=e.createElement("script"),r=e.getElementsByTagName("script")[0];n.type="text/javascript",n.setAttribute("charset","UTF-8"),n.async=!0,n.src=c,n.id="LA_COLLECT",i.d=n;var o=function(){s.LA.ids.push(i)};s.LA?s.LA.ids&&o():(s.LA=p,s.LA.ids=[],o()),r.parentNode.insertBefore(n,r)}()}({id:"Jl7ITgjGBeVbLmqO",ck:"Jl7ITgjGBeVbLmqO"});
</script><script>!(function(c,i,e,b){
var h=i.createElement("script");
var f=i.getElementsByTagName("script")[0];
h.type="text/javascript";
h.crossorigin=true;
h.onload=function(){new c[b]["Monitor"]().init({id:"Jl7IrsA7TWlXlR99"});};
f.parentNode.insertBefore(h,f);h.src=e;})(window,document,"https://sdk.51.la/perf/js-sdk-perf.min.js","LingQue");</script><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web&display=swap" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = {
root: '/',
algolia: undefined,
localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
translate: undefined,
noticeOutdate: undefined,
highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
copy: {
success: '复制成功',
error: '复制错误',
noSupport: '浏览器不支持'
},
relativeDate: {
homepage: false,
post: false
},
runtime: '天',
date_suffix: {
just: '刚刚',
min: '分钟前',
hour: '小时前',
day: '天前',
month: '个月前'
},
copyright: undefined,
lightbox: 'mediumZoom',
Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#1f1f1f","position":"bottom-left"},
source: {
justifiedGallery: {
js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery@2/dist/fjGallery.min.js',
css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery@2/dist/fjGallery.min.css'
}
},
isPhotoFigcaption: false,
islazyload: false,
isAnchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
title: '从零开始搭建个人博客',
isPost: true,
isHome: false,
isHighlightShrink: false,
isToc: true,
postUpdate: '2023-06-09 02:57:26'
}</script><noscript><style type="text/css">
#nav {
opacity: 1
}
.justified-gallery img {
opacity: 1
}
#recent-posts time,
#post-meta time {
display: inline !important
}
</style></noscript><script>(win=>{
win.saveToLocal = {
set: function setWithExpiry(key, value, ttl) {
if (ttl === 0) return
const now = new Date()
const expiryDay = ttl * 86400000
const item = {
value: value,
expiry: now.getTime() + expiryDay,
}
localStorage.setItem(key, JSON.stringify(item))
},
get: function getWithExpiry(key) {
const itemStr = localStorage.getItem(key)
if (!itemStr) {
return undefined
}
const item = JSON.parse(itemStr)
const now = new Date()
if (now.getTime() > item.expiry) {
localStorage.removeItem(key)
return undefined
}
return item.value
}
}
win.getScript = url => new Promise((resolve, reject) => {
const script = document.createElement('script')
script.src = url
script.async = true
script.onerror = reject
script.onload = script.onreadystatechange = function() {
const loadState = this.readyState
if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
script.onload = script.onreadystatechange = null
resolve()
}
document.head.appendChild(script)
})
win.activateDarkMode = function () {
document.documentElement.setAttribute('data-theme', 'dark')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
}
}
win.activateLightMode = function () {
document.documentElement.setAttribute('data-theme', 'light')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
}
}
const t = saveToLocal.get('theme')
if (t === 'dark') activateDarkMode()
else if (t === 'light') activateLightMode()
const asideStatus = saveToLocal.get('aside-status')
if (asideStatus !== undefined) {
if (asideStatus === 'hide') {
document.documentElement.classList.add('hide-aside')
} else {
document.documentElement.classList.remove('hide-aside')
}
}
const detectApple = () => {
if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
document.documentElement.classList.add('apple')
}
}
detectApple()
})(window)</script><link rel="stylesheet" href="/css/mycss.css"><script src="/js/sakura.js"></script><script src="/js/snow2.js"></script><meta name="generator" content="Hexo 6.1.0"><link rel="alternate" href="/atom.xml" title="magic-H" type="application/atom+xml">
</head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="https://s4.ax1x.com/2022/02/18/HT4dgI.png" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data is-center"><div class="data-item"><a href="/archives/"><div class="headline">文章</div><div class="length-num">21</div></a></div><div class="data-item"><a href="/tags/"><div class="headline">标签</div><div class="length-num">9</div></a></div><div class="data-item"><a href="/categories/"><div class="headline">分类</div><div class="length-num">0</div></a></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page" href="/%E7%9B%B8%E5%86%8C/"><i class="fa-fw fa fa-video"></i><span> 相册</span></a></div><div class="menus_item"><a class="site-page" href="/questions/"><i class="fa-fw fa fa-video"></i><span> 答疑</span></a></div><div class="menus_item"><a class="site-page" href="/artitalk/"><i class="fa-fw fa fa-home"></i><span> 说说</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间线</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://s4.ax1x.com/2022/02/19/HHwzEq.png')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">magic-H</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 主页</span></a></div><div class="menus_item"><a class="site-page" href="/%E7%9B%B8%E5%86%8C/"><i class="fa-fw fa fa-video"></i><span> 相册</span></a></div><div class="menus_item"><a class="site-page" href="/questions/"><i class="fa-fw fa fa-video"></i><span> 答疑</span></a></div><div class="menus_item"><a class="site-page" href="/artitalk/"><i class="fa-fw fa fa-home"></i><span> 说说</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间线</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">从零开始搭建个人博客</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-02-19T00:00:00.000Z" title="发表于 2022-02-19 00:00:00">2022-02-19</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-06-09T02:57:26.202Z" title="更新于 2023-06-09 02:57:26">2023-06-09</time></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">1.6k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>5分钟</span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="1-简介"><a href="#1-简介" class="headerlink" title="1.简介"></a>1.简介</h1><p> 曾经有位老师说过：“希望我们不要沦落到用简历找工作”，对于程序员来说个人博客当然是最好展示自己的能力的平台。<del>（某圈装13专用）</del></p>
<p> <strong>本次需要使用的软件及网站（点击即可下载）：</strong></p>
<ul>
<li><p>VPN（为了网站的持久运行，<del>不敢放链接</del>）</p>
<p>Tips：如果出现timeout , 下载速度慢都可以使用VPN</p>
</li>
<li><p><a target="_blank" rel="noopener" href="https://www.aliyundrive.com/s/8KNQqZ4jc7b">Git</a></p>
</li>
<li><p><a target="_blank" rel="noopener" href="https://www.aliyundrive.com/s/fyNQpqUKf1Y">Node</a></p>
</li>
<li><p><a target="_blank" rel="noopener" href="https://github.com/">Github</a>（请确保你有VPN）</p>
</li>
<li><p><a target="_blank" rel="noopener" href="https://www.aliyundrive.com/s/tqgwmjTwSxQ">Typora</a>（用于博客的编写，建议安装完后主动学习Markdown语法）</p>
</li>
</ul>
<hr>
<h1 id="2-使用Hexo在本地搭建简单的网站"><a href="#2-使用Hexo在本地搭建简单的网站" class="headerlink" title="2.使用Hexo在本地搭建简单的网站"></a>2.使用Hexo在本地搭建简单的网站</h1><ol>
<li><h2 id="安装Node和Git"><a href="#安装Node和Git" class="headerlink" title="安装Node和Git"></a><strong>安装Node和Git</strong></h2><ul>
<li><p>打开下载的Node安装包，不需要修改任何东西，都选择“下一步”进行安装。</p>
</li>
<li><p>打开下载的Git安装包，不需要修改任何东西，都选择“下一步”进行安装。</p>
<ul>
<li><p><strong>刚刚测试了一下好像不需要加入环境变量</strong></p>
</li>
<li><p>找到Git的安装文件夹，找到里面的bin文件夹，复制两个地址</p>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181152959.png" alt="img"></p>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181156794.png" alt="img"></p>
</li>
<li><p>使用 Win + Q 打开搜索，输入：环境变量。</p>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181241843.png" alt="image-20220219162108635"></p>
</li>
<li><p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181242749.png" alt="image-202202191620342"></p>
</li>
<li><p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181242534.png" alt="image-20220219162333412"></p>
<p>在这里面添加刚刚复制的地址</p>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181243256.png" alt="image-20220219163016488"></p>
</li>
</ul>
</li>
</ul>
</li>
<li><h2 id="以管理员身份打开cmd"><a href="#以管理员身份打开cmd" class="headerlink" title="以管理员身份打开cmd"></a><strong>以管理员身份打开cmd</strong></h2><ul>
<li><p>使用 Win + Q 打开搜索，输入cmd。</p>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181244639.png" alt="742a7bc84b3b86a6c33865beed7c504"></p>
</li>
<li><p>选择cmd图标，右键选择<strong>以管理员身份打开</strong></p>
</li>
</ul>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181244036.png" alt="4231effa2b763ed832da321ebe59c21"></p>
</li>
<li><h2 id="使用cmd检查是否成功安装Node"><a href="#使用cmd检查是否成功安装Node" class="headerlink" title="使用cmd检查是否成功安装Node"></a><strong>使用cmd检查是否成功安装Node</strong></h2></li>
</ol>
<ul>
<li><p>在cmd中输入以下命令</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">node -v</span><br></pre></td></tr></table></figure>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm -v</span><br></pre></td></tr></table></figure>
</li>
<li><p>cmd如果和图片中的一样则安装成功</p>
</li>
</ul>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181255066.png" alt="9726bfe0fdf9e5517e9256074a417f0"></p>
<ol start="4">
<li><h2 id="使用cmd安装cnpm"><a href="#使用cmd安装cnpm" class="headerlink" title="使用cmd安装cnpm"></a><strong>使用cmd安装cnpm</strong></h2><ul>
<li><p>在cmd中输入以下命令</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g cnpm --registry=https://registry.npm.taobao.org</span><br></pre></td></tr></table></figure>
</li>
<li><p>使用以下命令检查是否安装成功</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm -v</span><br></pre></td></tr></table></figure></li>
</ul>
</li>
</ol>
<ul>
<li><p>若和下面图片一样即安装成功</p>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181256148.png" alt="b6b21b30a10f947ce9b3879ae16c84e"></p>
</li>
</ul>
<ol start="5">
<li><h2 id="使用cmd安装Hexo模块"><a href="#使用cmd安装Hexo模块" class="headerlink" title="使用cmd安装Hexo模块"></a><strong>使用cmd安装Hexo模块</strong></h2><ul>
<li><p>cmd中输入以下命令：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install -g hexo-cli</span><br></pre></td></tr></table></figure>
</li>
<li><p>同样的我们使用以下命令检查是否安装成功</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo -v</span><br></pre></td></tr></table></figure>
</li>
<li><p>若和下面图片一样即安装成功</p>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181256945.png" alt="cf49f15a84024eb1ebb88c820e1cfba"></p>
</li>
</ul>
</li>
<li><h2 id="创建一个用于网站的文件夹"><a href="#创建一个用于网站的文件夹" class="headerlink" title="创建一个用于网站的文件夹"></a><strong>创建一个用于网站的文件夹</strong></h2><ul>
<li><p>在电脑里新建名为blog的文件夹（名字无所谓），并复制改文件夹地址。</p>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181257557.png" alt="4c0e9dc5889a218e2debffbaeebcf72"> </p>
<p>进入blog文件夹，复制文件夹的地址</p>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181256633.png" alt="06a70e46b649dab250c3df8d02dcba0"></p>
</li>
<li><p>在cmd中进入该文件夹<br>cmd输入以下命令</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">blog文件夹所在的盘符，比如我都在E盘，就输入 E:</span><br></pre></td></tr></table></figure>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">cd</span> + 复制的地址</span><br></pre></td></tr></table></figure>
<p>下图则成功进入了blog文件夹</p>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181257770.png" alt="9216f0fcc20c82b8eb8dba5001af495"></p>
</li>
</ul>
</li>
<li><h2 id="生成博客"><a href="#生成博客" class="headerlink" title="生成博客"></a><strong>生成博客</strong></h2><ul>
<li><p>初始化hexo</p>
<p>在cmd输入</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo init</span><br></pre></td></tr></table></figure>
<p>结果如图：</p>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181257915.png" alt="8b72cba13de8c8d4f38eb28d5734956"></p>
</li>
<li><p>同时你的blog文件夹里也会生成许多文件</p>
</li>
</ul>
</li>
</ol>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181257777.png" alt="2f14b803d274b726d7a03751253a7f9"></p>
<ol start="8">
<li><h2 id="启动博客"><a href="#启动博客" class="headerlink" title="启动博客"></a><strong>启动博客</strong></h2><ul>
<li><p>在命令行输入</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo s</span><br></pre></td></tr></table></figure>
</li>
<li><p>出现以下命令时，你的博客已经生成，cmd命令告诉我们可以在 <a target="_blank" rel="noopener" href="http://localhost:4000/">http://localhost:4000/</a> 中查看我们的博客</p>
</li>
</ul>
</li>
</ol>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181258268.png" alt="f1b92fb2d5597c4e45c2ddcfb6c9ca3"></p>
<p> </p>
<ol start="9">
<li><h2 id="查看博客"><a href="#查看博客" class="headerlink" title="查看博客"></a><strong>查看博客</strong></h2><ul>
<li>打开浏览器，输入<a target="_blank" rel="noopener" href="http://localhost:4000/">http://localhost:4000/</a></li>
</ul>
</li>
</ol>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181258423.png" alt="6b9270dbac5e71bbeab2ac4586e8d10"></p>
<p> <del>完结撒花！！！</del></p>
<hr>
<h1 id="3-将网站部署到Github"><a href="#3-将网站部署到Github" class="headerlink" title="3.将网站部署到Github"></a>3.将网站部署到Github</h1><ol>
<li><h2 id="断开刚刚运行的博客"><a href="#断开刚刚运行的博客" class="headerlink" title="断开刚刚运行的博客"></a><strong>断开刚刚运行的博客</strong></h2><ul>
<li><p>在cmd里按 Ctrl+C，再输入Y确认，即可使博客停止运行（Win11不需要输入Y确认）</p>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181258122.png" alt="75d7db09c763177877f806d9f3159eb"></p>
</li>
</ul>
</li>
<li><h2 id="打开Github-创建仓库"><a href="#打开Github-创建仓库" class="headerlink" title="打开Github,创建仓库"></a><strong>打开<a target="_blank" rel="noopener" href="https://github.com/">Github</a>,创建仓库</strong></h2><ul>
<li><p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181258274.png" alt="image-20220219135052463"></p>
</li>
<li><p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181258866.png" alt="f3ef572d7e92882bab9a75ccfc8949f"></p>
</li>
<li><p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181259243.png" alt="705e74fad56ad06622788143904572f"></p>
</li>
<li><p>仓库名的必须时昵称+github.io，然后选择的creat就好</p>
<p>如图：</p>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181259741.png" alt="1de48b6428044115dc20978b49fb798"></p>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181259267.png" alt="a96c1f58630baf0d6c387d6bbe803ad"></p>
<p><strong>图中的Description可以自由填写</strong></p>
</li>
</ul>
</li>
<li><h2 id="复制仓库的链接"><a href="#复制仓库的链接" class="headerlink" title="复制仓库的链接"></a><strong>复制仓库的链接</strong></h2><ul>
<li>因为我已经创建了magic-H728.github.io的仓库，无法创建同名仓库，只能创建了magic-H728.github.i用于展示</li>
<li><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181259620.png" alt="6f04670d0fc23a34851473532a0a926"></li>
</ul>
</li>
<li><h2 id="准备部署"><a href="#准备部署" class="headerlink" title="准备部署"></a><strong>准备部署</strong></h2><ul>
<li><p>在cmd的blog目录下输入一下命令安装<strong>部署插件</strong>：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cnpm install --save hexo-deployer-git</span><br></pre></td></tr></table></figure>
<p><del>安装时间比较长</del></p>
<p>成功安装样例：</p>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181259892.png" alt="4d27d17dbfbe339f9cedcfe3a50a8dd"></p>
</li>
<li><p>修改_config.yml文件</p>
<ul>
<li><p>打开blog文件夹，找到**_config.yml**文件</p>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181259573.png" alt="image-20220219143552428"></p>
<p><strong>_config.yml很重要</strong></p>
</li>
<li><p>使用VScode打开**_config.yml**（其它的用于写代码的也可以，记事本也可以）</p>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181300047.png" alt="image-20220219143934126"></p>
<p>找到最下面的这一部分，修改为：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Deployment</span></span><br><span class="line"><span class="comment">## Docs: https://hexo.io/docs/one-command-deployment</span></span><br><span class="line">deploy:</span><br><span class="line"> <span class="built_in">type</span>: git</span><br><span class="line"> repo: <span class="comment">#输入GitHub仓库的地址#</span></span><br><span class="line"> branch: main</span><br></pre></td></tr></table></figure>
<p><strong>repo后面改为自己GitHub仓库的地址，每个引号的后面都有一个空格</strong></p>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181300907.png" alt="image-20220220001217110"></p>
</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>开始部署</strong></p>
<ul>
<li><p>cmd在blog目录输入以下命令，开始部署（请确保你连接了VPN)：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo d</span><br></pre></td></tr></table></figure>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181300866.png" alt="image-20220219145006031"></p>
<p>第一次输入hexo d后会提示你登录，先使用Token（可能有点麻烦，具体怎么获取Token，搜索关键词Github Token）</p>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181300830.jpeg" alt="357b34036ae70241305c2b6c17c9075"></p>
<p>仓库中也生成了许多文件</p>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181300615.png" alt="image-20220219145428295"></p>
<p>如果出现以下问题：</p>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181300112.png" alt="0df782be0074a4f50a653066e51a734"></p>
<p>在cmd中输入git init ，然后再输入 hexo d</p>
</li>
<li><p>在浏览器输入网站 昵称+ .github.io</p>
<p>如：magic-H728.github.io</p>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181300619.png" alt="image-20220219145446626"></p>
<p><del>部署成功，完结撒花</del></p>
</li>
</ul>
</li>
</ol>
<hr>
<h1 id="4-页面美化"><a href="#4-页面美化" class="headerlink" title="4.页面美化"></a>4.页面美化</h1><ul>
<li>看<a href="magic-h728.gihub.io">我的博客</a>是不是 <del>高大上</del> 不值一提，所以我们需要美化我们的页面。<del>不然某圈装不了13</del></li>
</ul>
<ol>
<li><h2 id="美化方法"><a href="#美化方法" class="headerlink" title="美化方法"></a><strong>美化方法</strong></h2><ul>
<li>目前较为简单的美化方法是使用已有的主题</li>
</ul>
</li>
<li><h2 id="安装主题"><a href="#安装主题" class="headerlink" title="安装主题"></a><strong>安装主题</strong></h2><ul>
<li><p>在cmd的blog目录下输入，安装swig：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i hexo-renderer-swig</span><br></pre></td></tr></table></figure>
</li>
<li><p>在cmd的blog目录下输入GitHub已有的主题链接（链接可以通过Github，CSDN，b站等获取）</p>
<p>比如使用</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git <span class="built_in">clone</span> https://github.com/iissnan/hexo-theme-next themes/next</span><br></pre></td></tr></table></figure>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181301502.png" alt="image-20220219151446013"></p>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181301986.png" alt="image-20220219151536936"></p>
</li>
<li><p>在blog\themes文件夹里面可以看见这个主题</p>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181301330.png" alt="image-20220219151826070"></p>
<p>记住这个主题的名字next</p>
</li>
<li><p>修改blog文件夹里的_config.yml文件</p>
<ul>
<li><p>找到第100行</p>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181302374.png" alt="image-20220219152127678"></p>
<p>将landscape改为我们主题的名字next</p>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181302169.png" alt="image-20220219152224928"></p>
<p>以下这些配置对应的是网站的名字和作者，可以自行修改</p>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181302513.png" alt="image-20220219164703958"></p>
</li>
</ul>
</li>
</ul>
</li>
<li><h2 id="生成博客-1"><a href="#生成博客-1" class="headerlink" title="生成博客"></a><strong>生成博客</strong></h2><p><strong>每次更换主题后都需要执行下列操作，在每次不确定哪错了也可以尝试这个方法</strong></p>
<ul>
<li><p>在cmd的blog目录下输入</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo clean</span><br></pre></td></tr></table></figure>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo g</span><br></pre></td></tr></table></figure>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo d</span><br></pre></td></tr></table></figure>
</li>
<li><p>打开网页查看效果</p>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181302999.png" alt="image-20220219154100488"></p>
<p><del>（更多好看的主题需要自行探索）</del></p>
</li>
</ul>
</li>
</ol>
<hr>
<h1 id="5-编写第一份博客"><a href="#5-编写第一份博客" class="headerlink" title="5.编写第一份博客"></a>5.编写第一份博客</h1><ol>
<li><h2 id="在电脑上找到-blog-source-posts文件夹"><a href="#在电脑上找到-blog-source-posts文件夹" class="headerlink" title="在电脑上找到\blog\source_posts文件夹"></a><strong>在电脑上找到\blog\source_posts文件夹</strong></h2><p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181302490.png" alt="image-20220219154339879"></p>
<p>以md为后缀的文件就是我们的博客，这是用Markdown语法编写的。</p>
</li>
<li><h2 id="打开Typora编写博客"><a href="#打开Typora编写博客" class="headerlink" title="打开Typora编写博客"></a><strong>打开Typora编写博客</strong></h2><ul>
<li><p><img src="https://s2.loli.net/2022/02/19/DUezacijyGsM3xu.png" alt="image-20220219154600816"></p>
</li>
<li><p>编写完成后将文件存在\blog\source_posts文件夹之中</p>
<p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181302008.png" alt="image-20220219154746253"></p>
</li>
</ul>
</li>
<li><h2 id="然后再cmd的blog目录下输入下列命令："><a href="#然后再cmd的blog目录下输入下列命令：" class="headerlink" title="然后再cmd的blog目录下输入下列命令："></a><strong>然后再cmd的blog目录下输入下列命令：</strong></h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo clean</span><br></pre></td></tr></table></figure>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo g</span><br></pre></td></tr></table></figure>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo d</span><br></pre></td></tr></table></figure>
<p><strong>hexo d是将代码推送到github，可以让所有人通过网址看见；hexo s是只能使用当前电脑通过<a target="_blank" rel="noopener" href="http://localhost:4000/%E6%9F%A5%E7%9C%8B%EF%BC%8C%E4%B8%80%E8%88%AC%E7%94%A8%E4%BA%8E%E6%A3%80%E6%9F%A5%E4%BD%BF%E7%94%A8">http://localhost:4000/查看，一般用于检查使用</a></strong></p>
</li>
<li><h2 id="查看网页"><a href="#查看网页" class="headerlink" title="查看网页"></a><strong>查看网页</strong></h2><p><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181303719.png" alt="image-20220219160412938"></p>
<p><del>哈哈哈哈完结撒花</del></p>
</li>
</ol>
<hr>
<h1 id="6-Tips"><a href="#6-Tips" class="headerlink" title="6. Tips"></a>6. Tips</h1><ul>
<li>hexo clean是清除已经生成的网页，hexo g生成新的网页，建议每次写完博客后配合使用</li>
<li>hexo d是将文件推送到Github，hexo s是在本地开启网站的访问（使用Ctrl+C退出）</li>
<li>大多数的操作都是再cmd的blog目录操作，注意检查。</li>
<li>如果实在没办法，把blog文件夹删除就可以重来</li>
<li>早日学会Markdown语法，很有用！！！！！！</li>
<li>你的网站是部署在GitHub上的<del>（不要钱）</del>！！！</li>
<li>使用请遵守法律法规！！！！！！</li>
</ul>
<h4 id="完结，撒花！！！"><a href="#完结，撒花！！！" class="headerlink" title="完结，撒花！！！"></a><strong>完结，撒花！！！</strong></h4></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">magic-H</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://magic-h.top/29344.html">https://magic-h.top/29344.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://magic-H.top" target="_blank">magic-H</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Blog/">Blog</a></div><div class="post_share"><div class="social-share" data-image="https://s4.ax1x.com/2022/02/19/HHwzEq.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/41940.html"><img class="prev-cover" src="https://s4.ax1x.com/2022/02/24/bkZVAA.png" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Code-server及开发语言的环境配置</div></div></a></div><div class="next-post pull-right"><a href="/481.html"><img class="next-cover" src="https://s4.ax1x.com/2022/02/18/HT4dgI.png" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Hello World！</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="waline-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="https://s4.ax1x.com/2022/02/18/HT4dgI.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">magic-H</div><div class="author-info__description"></div></div><div class="card-info-data is-center"><div class="card-info-data-item"><a href="/archives/"><div class="headline">文章</div><div class="length-num">21</div></a></div><div class="card-info-data-item"><a href="/tags/"><div class="headline">标签</div><div class="length-num">9</div></a></div><div class="card-info-data-item"><a href="/categories/"><div class="headline">分类</div><div class="length-num">0</div></a></div></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/magic-H728"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/magic-H728" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="mailto:[email protected]" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">This is my Blog</div></div><div class="card-widget"><div class="item-headline"><i></i><span></span></div><div class="item-content"></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#1-%E7%AE%80%E4%BB%8B"><span class="toc-text">1.简介</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#2-%E4%BD%BF%E7%94%A8Hexo%E5%9C%A8%E6%9C%AC%E5%9C%B0%E6%90%AD%E5%BB%BA%E7%AE%80%E5%8D%95%E7%9A%84%E7%BD%91%E7%AB%99"><span class="toc-text">2.使用Hexo在本地搭建简单的网站</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%89%E8%A3%85Node%E5%92%8CGit"><span class="toc-text">安装Node和Git</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%A5%E7%AE%A1%E7%90%86%E5%91%98%E8%BA%AB%E4%BB%BD%E6%89%93%E5%BC%80cmd"><span class="toc-text">以管理员身份打开cmd</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8cmd%E6%A3%80%E6%9F%A5%E6%98%AF%E5%90%A6%E6%88%90%E5%8A%9F%E5%AE%89%E8%A3%85Node"><span class="toc-text">使用cmd检查是否成功安装Node</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8cmd%E5%AE%89%E8%A3%85cnpm"><span class="toc-text">使用cmd安装cnpm</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8cmd%E5%AE%89%E8%A3%85Hexo%E6%A8%A1%E5%9D%97"><span class="toc-text">使用cmd安装Hexo模块</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E7%94%A8%E4%BA%8E%E7%BD%91%E7%AB%99%E7%9A%84%E6%96%87%E4%BB%B6%E5%A4%B9"><span class="toc-text">创建一个用于网站的文件夹</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%94%9F%E6%88%90%E5%8D%9A%E5%AE%A2"><span class="toc-text">生成博客</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%90%AF%E5%8A%A8%E5%8D%9A%E5%AE%A2"><span class="toc-text">启动博客</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9F%A5%E7%9C%8B%E5%8D%9A%E5%AE%A2"><span class="toc-text">查看博客</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#3-%E5%B0%86%E7%BD%91%E7%AB%99%E9%83%A8%E7%BD%B2%E5%88%B0Github"><span class="toc-text">3.将网站部署到Github</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%AD%E5%BC%80%E5%88%9A%E5%88%9A%E8%BF%90%E8%A1%8C%E7%9A%84%E5%8D%9A%E5%AE%A2"><span class="toc-text">断开刚刚运行的博客</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%89%93%E5%BC%80Github-%E5%88%9B%E5%BB%BA%E4%BB%93%E5%BA%93"><span class="toc-text">打开Github,创建仓库</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A4%8D%E5%88%B6%E4%BB%93%E5%BA%93%E7%9A%84%E9%93%BE%E6%8E%A5"><span class="toc-text">复制仓库的链接</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%87%86%E5%A4%87%E9%83%A8%E7%BD%B2"><span class="toc-text">准备部署</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#4-%E9%A1%B5%E9%9D%A2%E7%BE%8E%E5%8C%96"><span class="toc-text">4.页面美化</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BE%8E%E5%8C%96%E6%96%B9%E6%B3%95"><span class="toc-text">美化方法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%89%E8%A3%85%E4%B8%BB%E9%A2%98"><span class="toc-text">安装主题</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%94%9F%E6%88%90%E5%8D%9A%E5%AE%A2-1"><span class="toc-text">生成博客</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#5-%E7%BC%96%E5%86%99%E7%AC%AC%E4%B8%80%E4%BB%BD%E5%8D%9A%E5%AE%A2"><span class="toc-text">5.编写第一份博客</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9C%A8%E7%94%B5%E8%84%91%E4%B8%8A%E6%89%BE%E5%88%B0-blog-source-posts%E6%96%87%E4%BB%B6%E5%A4%B9"><span class="toc-text">在电脑上找到\blog\source_posts文件夹</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%89%93%E5%BC%80Typora%E7%BC%96%E5%86%99%E5%8D%9A%E5%AE%A2"><span class="toc-text">打开Typora编写博客</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%84%B6%E5%90%8E%E5%86%8Dcmd%E7%9A%84blog%E7%9B%AE%E5%BD%95%E4%B8%8B%E8%BE%93%E5%85%A5%E4%B8%8B%E5%88%97%E5%91%BD%E4%BB%A4%EF%BC%9A"><span class="toc-text">然后再cmd的blog目录下输入下列命令：</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9F%A5%E7%9C%8B%E7%BD%91%E9%A1%B5"><span class="toc-text">查看网页</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#6-Tips"><span class="toc-text">6. Tips</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AE%8C%E7%BB%93%EF%BC%8C%E6%92%92%E8%8A%B1%EF%BC%81%EF%BC%81%EF%BC%81"><span class="toc-text">完结，撒花！！！</span></a></li></ol></li></ol></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/25737.html" title="数据结构OJ"><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202301131413619.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="数据结构OJ"/></a><div class="content"><a class="title" href="/25737.html" title="数据结构OJ">数据结构OJ</a><time datetime="2023-01-13T00:00:00.000Z" title="发表于 2023-01-13 00:00:00">2023-01-13</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/48665.html" title="Notion知识体系管理工具"><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207311705467.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Notion知识体系管理工具"/></a><div class="content"><a class="title" href="/48665.html" title="Notion知识体系管理工具">Notion知识体系管理工具</a><time datetime="2022-07-31T00:00:00.000Z" title="发表于 2022-07-31 00:00:00">2022-07-31</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2567.html" title="Java刷题笔记（三）"><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207291555693.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Java刷题笔记（三）"/></a><div class="content"><a class="title" href="/2567.html" title="Java刷题笔记（三）">Java刷题笔记（三）</a><time datetime="2022-07-30T00:00:00.000Z" title="发表于 2022-07-30 00:00:00">2022-07-30</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/62779.html" title="Java刷题笔记（二）"><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207291555693.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Java刷题笔记（二）"/></a><div class="content"><a class="title" href="/62779.html" title="Java刷题笔记（二）">Java刷题笔记（二）</a><time datetime="2022-07-29T00:00:00.000Z" title="发表于 2022-07-29 00:00:00">2022-07-29</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/64644.html" title="线性表（下）"><img src="https://testingcf.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207261740136.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="线性表（下）"/></a><div class="content"><a class="title" href="/64644.html" title="线性表（下）">线性表（下）</a><time datetime="2022-07-28T00:00:00.000Z" title="发表于 2022-07-28 00:00:00">2022-07-28</time></div></div></div></div></div></div></main><footer id="footer" style="background-image: url('https://s4.ax1x.com/2022/02/19/HHwzEq.png')"><div id="footer-wrap"><div class="copyright">©2022 - 2023 By magic-H</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div><img src="https://gcore.jsdelivr.net/gh/magic-H728/Store@master/blog-img/202207181316087.png">
<a href="http://www.beian.miit.gov.cn/" style="color:#f72b07" target="_blank">粤ICP备2022027428号</a><div class="footer_custom_text">Hi, welcome to my <a href="magic-h.top">blog</a>!</div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">本地搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span> 数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.min.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><script src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js"></script><script>function panguFn () {
if (typeof pangu === 'object') pangu.autoSpacingPage()
else {
getScript('https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js')
.then(() => {
pangu.autoSpacingPage()
})
}
}
function panguInit () {
if (false){
GLOBAL_CONFIG_SITE.isPost && panguFn()
} else {
panguFn()
}
}
document.addEventListener('DOMContentLoaded', panguInit)</script><script src="/js/search/local-search.js"></script><div class="js-pjax"><script>(() => {
const $mermaidWrap = document.querySelectorAll('#article-container .mermaid-wrap')
if ($mermaidWrap.length) {
window.runMermaid = () => {
window.loadMermaid = true
const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'default'
Array.from($mermaidWrap).forEach((item, index) => {
const mermaidSrc = item.firstElementChild
const mermaidThemeConfig = '%%{init:{ \'theme\':\'' + theme + '\'}}%%\n'
const mermaidID = 'mermaid-' + index
const mermaidDefinition = mermaidThemeConfig + mermaidSrc.textContent
mermaid.mermaidAPI.render(mermaidID, mermaidDefinition, (svgCode) => {
mermaidSrc.insertAdjacentHTML('afterend', svgCode)
})
})
}
const loadMermaid = () => {
window.loadMermaid ? runMermaid() : getScript('https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js').then(runMermaid)
}
window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid)
}
})()</script><script>function loadWaline () {
function initWaline () {
const waline = new Waline(Object.assign({
el: '#waline-wrap',
serverURL: 'https://magic-h-mr0qem8oh-magic-h728.vercel.app/',
path: location.pathname,
visitor: false,
dark: 'html[data-theme="dark"]'
}, null))
}
if (typeof Waline === 'function') initWaline()
else getScript('https://cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js').then(initWaline)
}
if ('Waline' === 'Waline' || !false) {
if (false) btf.loadComment(document.getElementById('waline-wrap'),loadWaline)
else setTimeout(loadWaline, 0)
} else {
function loadOtherComment () {
loadWaline()
}
}</script></div><canvas class="fireworks" mobile="false"></canvas><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/fireworks.min.js"></script><script defer="defer" id="fluttering_ribbon" mobile="true" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-fluttering-ribbon.min.js"></script><script id="canvas_nest" defer="defer" color="200,100,255" opacity="0.7" zIndex="-1" count="118" mobile="true" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-nest.min.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = false;
POWERMODE.mobile = false;
document.body.addEventListener('input', POWERMODE);
</script><script src="https://cdn.jsdelivr.net/npm/pjax/pjax.min.js"></script><script>let pjaxSelectors = ["title","#config-diff","#body-wrap","#rightside-config-hide","#rightside-config-show",".js-pjax"]
var pjax = new Pjax({
elements: 'a:not([target="_blank"]):not([href="/music/"]):not([href="/no-pjax/"])',
selectors: pjaxSelectors,
cacheBust: false,
analytics: false,
scrollRestoration: false
})
document.addEventListener('pjax:send', function () {
// removeEventListener scroll
window.tocScrollFn && window.removeEventListener('scroll', window.tocScrollFn)
window.scrollCollect && window.removeEventListener('scroll', scrollCollect)
typeof preloader === 'object' && preloader.initLoading()
document.getElementById('rightside').style.cssText = "opacity: ''; transform: ''"
if (window.aplayers) {
for (let i = 0; i < window.aplayers.length; i++) {
if (!window.aplayers[i].options.fixed) {
window.aplayers[i].destroy()
}
}
}
typeof typed === 'object' && typed.destroy()
//reset readmode
const $bodyClassList = document.body.classList
$bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')
})
document.addEventListener('pjax:complete', function () {
window.refreshFn()
document.querySelectorAll('script[data-pjax]').forEach(item => {
const newScript = document.createElement('script')
const content = item.text || item.textContent || item.innerHTML || ""
Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
newScript.appendChild(document.createTextNode(content))
item.parentNode.replaceChild(newScript, item)
})
GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()
typeof chatBtnFn === 'function' && chatBtnFn()
typeof panguInit === 'function' && panguInit()
// google analytics
typeof gtag === 'function' && gtag('config', '', {'page_path': window.location.pathname});
// baidu analytics
typeof _hmt === 'object' && _hmt.push(['_trackPageview',window.location.pathname]);
typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()
// prismjs
typeof Prism === 'object' && Prism.highlightAll()
typeof preloader === 'object' && preloader.endLoading()
})
document.addEventListener('pjax:error', (e) => {
if (e.request.status === 404) {
pjax.loadUrl('/404.html')
}
})</script></div></body></html>