-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatom.xml
203 lines (126 loc) · 76.8 KB
/
atom.xml
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
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>椰子.君</title>
<link href="/atom.xml" rel="self"/>
<link href="https://cocoonut.top/"/>
<updated>2020-06-04T16:56:45.399Z</updated>
<id>https://cocoonut.top/</id>
<author>
<name>coconut</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>我的云主机折腾笔记</title>
<link href="https://cocoonut.top/2020-05-05/"/>
<id>https://cocoonut.top/2020-05-05/</id>
<published>2020-05-05T13:29:22.000Z</published>
<updated>2020-06-04T16:56:45.399Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><p>经过一个星期的折腾，总算搞定了服务端的环境搭建。趁着记忆犹新，这里做一些朴实无华并且枯燥的记录。</p><p>本文阅读对象：<strong>不了解Linux操作系统的小白</strong></p><p>在这篇文章中，你可以了解到：linux操作系统入门，通过SSH密钥远程登陆，Docker环境搭建。</p><p>开启从零开始的运维之<del>坑</del>路~</p><h3 id="Linux简介"><a href="#Linux简介" class="headerlink" title="Linux简介"></a>Linux简介</h3><h4 id="Linux是啥？"><a href="#Linux是啥？" class="headerlink" title="Linux是啥？"></a>Linux是啥？</h4><p>一种计算机操作系统。 </p><p>唔，简单来说就是这样。但它是一个<code>CLI</code>（command-line interface，命令行界面）组成的操作系统，在图形化的操作界面如<code>windows</code>得到普及之前，最广泛使用的用户界面就是这样的。</p><a id="more"></a><p>Linux的作者叫 <code>Linus</code>，瞧，优秀的连名字都是类似的：p </p><p>这个操作系统基于<code>GPL 2.0</code>开源协议，简单来说你可以自由使用它的源码和发行版，也可以修改它的源代码，但是不能闭源——是的，作者坚持开源的理念。</p><div class="note info"><p>Linux目前有很多发行版，有<code>Dibian</code>,<code>Redhat</code>,<code>CentOS</code>,<code>Ubuntu</code>…等等，其社区非常繁荣。如果Linus申请专利保护，一定能收获难以想象的财富…事实上，他的开源价值观传播到了全世界，越来越多的人们开始为开源做出贡献，才有了今天这样繁荣的开源生态。</p></div><p>Linus大神还有另一个开源作品<code>git</code>，它是一种分布式版本控制系统…扯远了，咱还是说Linux吧…</p><p>其实，无论图形界面发展到什么水平，命令行方式的操作永远是不会变的，Linux命令有许多强大的功能：从简单的磁盘操作、文件存取、到进行复杂的多媒体图象和流媒体文件的制作都离不开命令行。虽然linux也有桌面系统，但是<code>X-window</code>也只是运行在命令行模式下的一个应用程序。</p><h4 id="Linux初体验"><a href="#Linux初体验" class="headerlink" title="Linux初体验"></a>Linux初体验</h4><p>我的云主机是阿里云的，操作系统是<code>Ubuntu 18.04.2 LTS</code> 64位的。本文写的不是很好但依然是用心的，接下来的演示也是经过本人深入实践的~</p><p>linux的指令大致可以分为三类：</p><ul><li><p>文档型（文档和目录的增删改查）</p></li><li><p>硬件型（磁盘/进程/服务/网络）</p></li><li><p>功能型（压缩/解压/下载/远程）</p></li></ul><p>我们先从远程登陆开始，然后边走边看尝试熟悉linux环境，最后集中总结一下这三种常用指令</p><p>在本地使用ssh建立和远端主机的会话</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">ssh root@[ipAddress] -p 22</span><br></pre></td></tr></table></figure><p><code>ipAddress</code>是服务器的公网ip，<code>-p</code>参数是为ssh远程连接开放的端口，默认为22，可以不用加。</p><p>接下来你需要输入密码，这里的密码是隐文，输入时不会从终端中得到任何反馈，输入完成敲击回车你就可以登陆远端。</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></pre></td><td class="code"><pre><span class="line">lsb_release -a <span class="comment">#查看操作系统</span></span><br><span class="line">uname -a <span class="comment">#查看内核信息</span></span><br></pre></td></tr></table></figure><p>查看磁盘信息</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">df <span class="comment">#显示磁盘的区块信息和使用情况（kB）</span></span><br><span class="line">df -TH <span class="comment">#显示磁盘的情况（GB）</span></span><br></pre></td></tr></table></figure><p>查看根目录的内容<br>将当前路径切换到根目录下，查看文件列表</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">cd</span> / <span class="comment">#切换目录</span></span><br><span class="line">ls -la <span class="comment">#以列表的方式显示当前目录结构，包含隐藏文件</span></span><br></pre></td></tr></table></figure><p>接下来你会看到这样的列表：<br><img src="/images/ls.png" alt></p><p>最前面的<code>drwxr-xr-xr</code>表示了用户目录的操作权，依次是root用户权限，组权限，其他用户权限。<br><code>d</code>表示这是一个目录（directory）而不是文件<br><code>r</code>表示具有读权限（read）<br><code>w</code>表示具有写权限（write）<br><code>x</code>表示具有执行权限（execute）</p><p>目录的简单说明<br>home：个人目录，可以放一些软件或存放download文件<br>etc：一般是一些软件的配置文件<br>sys：系统文件<br>usr：系统可执行文件<br>var：日志文件，因不断变化命名，包含经常存放的www目录</p><p>查看CPU/内存/进程</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">top</span><br></pre></td></tr></table></figure><p>这里的表会动态刷新，<code>Tasks</code>是当前运行的进程数量，<code>Mem</code>表示内存占用量，可以按“m”键切换百分比显示</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">vi /etc/hostname <span class="comment">#使用vi命令编辑这个文件</span></span><br></pre></td></tr></table></figure><p>这样会进入查看模式，此时按下<code>a</code>或者<code>i</code>进入编辑模式，修改里面的内容即修改你的用户名。完成编辑后按下<code>esc</code>，输入<code>:wq</code>保存并退出编辑。<br>重启服务器，就可以看到主机名更新啦</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">reboot <span class="comment">#这样做会断开ssh连接</span></span><br></pre></td></tr></table></figure><h4 id="修改ssh端口"><a href="#修改ssh端口" class="headerlink" title="修改ssh端口"></a>修改ssh端口</h4><p>ssh端口默认为22，修改常用端口后可以提高服务器的安全性，降低遭受攻击的风险；按照下面的步骤操作</p><ol><li><p>编辑SSH配置文件<br>SSH配置文件路径为：<code>/etc/ssh/sshd_config</code></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">vi /etc/ssh/sshd_config</span><br></pre></td></tr></table></figure></li><li><p>修改端口号<br>找到port: 22，取消#注释，修改为ssh连接想用的端口号,如</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">port 10022</span><br></pre></td></tr></table></figure></li></ol><p>然后<code>esc</code>,输入 <code>:wq</code>保存，退出编辑</p><ol start="3"><li>放行ssh端口<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">ufw allow 10022</span><br></pre></td></tr></table></figure></li></ol><p>某些云服务商需要在云端手动放行端口，在云服务控制台可以找到，手动添加规则即可。</p><ol start="4"><li><p>重启远端SSH服务</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">service ssh restart</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">ssh root@[ipAddress] -p 10022</span><br></pre></td></tr></table></figure></li></ol><h4 id="使用密钥登陆"><a href="#使用密钥登陆" class="headerlink" title="使用密钥登陆"></a>使用密钥登陆</h4><p>配置密钥后，就可以免密码建立ssh连接了，而且更加安全</p><ol><li>生成SSHkey（本地）<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> ~/.ssh && ls -la <span class="comment">#检查用户目录是否存在公钥对；</span></span><br></pre></td></tr></table></figure></li></ol><p>若没有<code>id_rsa.pub</code>，使用下面的命令生成公钥对</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">ssh keygen</span><br></pre></td></tr></table></figure><p>接下来的会话会询问要将密钥保存在哪里、想要设置的口令等，可以连续敲击回车使用默认设置。</p><div class="note info"><p>如果设置了私钥口令，则每次建立ssh连接都需要输入口令，然后才会去验证私钥</p></div><p>这个命令会在本地生成两个密钥文件，其中<code>id_rsa.pub</code>是公钥文件，<code>id_rsa</code>是私钥文件。私钥万万不可泄漏给他人</p><ol start="2"><li>在远端修改SSH配置<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> ~/.ssh && ls -al <span class="comment">#查看是否存在authorized_keys</span></span><br></pre></td></tr></table></figure></li></ol><p>如果<code>home</code>下没有<code>.ssh</code>目录，使用下面的命令来创建<code>.ssh</code>目录</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">mkdir -p ~/.ssh</span><br></pre></td></tr></table></figure><div class="note info"><p><code>~</code>是<code>/home</code>目录的一个<code>alias</code>,即别名；类似于<code>/</code>指代根目录</p></div><p>将在本地生成的公钥文件<code>id_rsa.pub</code>所有内容复制到该文件中保存：</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">vi authorized_keys</span><br></pre></td></tr></table></figure><ol start="3"><li>在本地添加SSH配置<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> ~/.ssh && touch config <span class="comment">#进入该目录,新建config文件</span></span><br></pre></td></tr></table></figure></li></ol><p>使用命令创建文件的目的主要是不希望其带有任何文件扩展名，接下来你可以使用你喜欢的编辑器打开这个文件进行下面的编辑。</p><figure class="highlight plain"><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">Host cocoonut</span><br><span class="line"> Port 10022</span><br><span class="line"> HostName 192.**.**.1</span><br><span class="line"> user root</span><br><span class="line"> IdentityFile ~/.ssh/id_rsa</span><br><span class="line"> Identitiesonly yes</span><br></pre></td></tr></table></figure><p>字段说明：</p><figure class="highlight plain"><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">Host：远端主机用户名</span><br><span class="line"> Port SSH端口号</span><br><span class="line"> HostName 远端ip地址</span><br><span class="line"> User 用户类型</span><br><span class="line"> IdentityFile 本地私钥路径</span><br><span class="line"> IdentitiesOnly 私钥是否唯一</span><br></pre></td></tr></table></figure><p>多个ssh信息都可以写在这个文件中。</p><p>接下来，使用<code>ssh [远端主机用户名]</code>就可以直接建立SSH会话啦！</p><h3 id="Docker入门"><a href="#Docker入门" class="headerlink" title="Docker入门"></a>Docker入门</h3><h4 id="容器化应用Docker"><a href="#容器化应用Docker" class="headerlink" title="容器化应用Docker"></a>容器化应用Docker</h4><p>时下最火的虚拟化技术就是<code>Docker</code>了。在容器技术之前，业界的网红是虚拟机。而虚拟机技术的代表，是<code>VMWare</code>和<code>OpenStack</code>。之所以容器技术会火，是因为它小，轻，快。</p><h4 id="Docker的主要特性"><a href="#Docker的主要特性" class="headerlink" title="Docker的主要特性"></a>Docker的主要特性</h4><table><thead><tr><th>特性</th><th>说明</th></tr></thead><tbody><tr><td>文件系统隔离</td><td>每个进程容器运行在完全独立的根文件系统里。</td></tr><tr><td>资源隔离</td><td>可以使用cgroup为每个进程容器分配不同的系统资源，例如CPU和内存。</td></tr><tr><td>网络隔离</td><td>每个进程容器运行在自己的网络命名空间里，拥有自己的虚拟接口和IP地址。</td></tr><tr><td>写时复制</td><td>采用写时复制方式创建根文件系统，这让部署变得极其快捷，并且节省内存和硬盘空间。</td></tr><tr><td>日志记录</td><td>Docker将会收集和记录每个进程容器的标准流（stdout/stderr/stdin），用于实时检索或批量检索。</td></tr><tr><td>变更管理</td><td>容器文件系统的变更可以提交到新的映像中，并可重复使用以创建更多的容器。无需使用模板或手动配置。</td></tr><tr><td>交互式Shell</td><td>Docker可以分配一个虚拟终端并关联到任何容器的标准输入上，例如运行一个一次性交互shell。</td></tr><tr><td>资源划分</td><td>Docker采用的是资源共享型的管理方案，所有的Docker使用的硬件资源由docker daemon进行管理与分配。</td></tr></tbody></table><h4 id="Docker技术的三大核心概念"><a href="#Docker技术的三大核心概念" class="headerlink" title="Docker技术的三大核心概念"></a>Docker技术的三大核心概念</h4><ul><li>镜像（Image）</li><li>容器（Container）</li><li>仓库（Repository）</li></ul><h4 id="Docker环境搭建"><a href="#Docker环境搭建" class="headerlink" title="Docker环境搭建"></a>Docker环境搭建</h4><h5 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h5><p>以<code>Ubuntu 18.04 LTS</code>为例，最省心的安装方式是<a href="https://docs.docker.com/engine/install/ubuntu/#install-using-the-repository" target="_blank" rel="noopener">使用存储库安装。</a></p><p>其他操作系统请<a href="https://docs.docker.com/engine/install/" target="_blank" rel="noopener">移步这里。</a></p><ol><li><p>更新<code>apt</code>软件包索引并安装软件包，以允许apt通过HTTPS使用存储库：</p><figure class="highlight shell"><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><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#</span><span class="bash"> 更新</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> sudo apt-get update</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#</span><span class="bash"> 安装</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> sudo apt-get install \</span></span><br><span class="line"> apt-transport-https \</span><br><span class="line"> ca-certificates \</span><br><span class="line"> curl \</span><br><span class="line"> gnupg-agent \</span><br><span class="line"> software-properties-common</span><br></pre></td></tr></table></figure></li><li><p>添加Docker的官方GPG密钥：</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -</span></span><br></pre></td></tr></table></figure></li></ol><p>通过搜索指纹的后8个字符，验证现在是否拥有带有指纹的密钥：</p><figure class="highlight shell"><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><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> sudo apt-key fingerprint 0EBFCD88</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#</span><span class="bash"> 示例</span></span><br><span class="line">pub rsa4096 2017-02-22 [SCEA]</span><br><span class="line"> 9DC8 5822 9FC7 DD38 854A E2D8 8D81 803C 0EBF CD88</span><br><span class="line">uid [ unknown] Docker Release (CE deb) <[email protected]></span><br><span class="line">sub rsa4096 2017-02-22 [S]</span><br></pre></td></tr></table></figure><ol start="3"><li><p>设置稳定的存储库。</p><figure class="highlight shell"><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></pre></td><td class="code"><pre><span class="line"><span class="meta">#</span><span class="bash"> 以amd64处理器架构为例，其他类型的架构需要修改`arch=`后的参数</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> sudo add-apt-repository \</span></span><br><span class="line"> "deb [arch=amd64] https://download.docker.com/linux/ubuntu \</span><br><span class="line"><span class="meta"> $</span><span class="bash">(lsb_release -cs) \</span></span><br><span class="line"> stable"</span><br></pre></td></tr></table></figure></li><li><p>安装<code>Docker</code>引擎</p><figure class="highlight shell"><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></pre></td><td class="code"><pre><span class="line"><span class="meta">#</span><span class="bash"> 更新apt程序包索引</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> sudo apt-get update</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#</span><span class="bash"> 安装最新版本的Docker Engine和容器(也可以安装指定版本)</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> sudo apt-get install docker-ce docker-ce-cli containerd.io</span></span><br></pre></td></tr></table></figure></li><li><p>尝试运行<code>Hello world</code>镜像，验证是否已经正确安装</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#</span><span class="bash"> 首次执行时，这个命令会自动拉取hello-world镜像，然后运行</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> sudo docker run hello-world</span></span><br></pre></td></tr></table></figure></li></ol><h4 id="Docker-Compose"><a href="#Docker-Compose" class="headerlink" title="Docker Compose"></a>Docker Compose</h4><h3 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h3>]]></content>
<summary type="html">
<p>经过一个星期的折腾，总算搞定了服务端的环境搭建。趁着记忆犹新，这里做一些朴实无华并且枯燥的记录。</p>
<p>本文阅读对象：<strong>不了解Linux操作系统的小白</strong></p>
<p>在这篇文章中，你可以了解到：linux操作系统入门，通过SSH密钥远程登陆，Docker环境搭建。</p>
<p>开启从零开始的运维之<del>坑</del>路~</p>
<h3 id="Linux简介"><a href="#Linux简介" class="headerlink" title="Linux简介"></a>Linux简介</h3><h4 id="Linux是啥？"><a href="#Linux是啥？" class="headerlink" title="Linux是啥？"></a>Linux是啥？</h4><p>一种计算机操作系统。 </p>
<p>唔，简单来说就是这样。但它是一个<code>CLI</code>（command-line interface，命令行界面）组成的操作系统，在图形化的操作界面如<code>windows</code>得到普及之前，最广泛使用的用户界面就是这样的。</p>
</summary>
<category term="零食" scheme="https://cocoonut.top/categories/%E9%9B%B6%E9%A3%9F/"/>
<category term="零食" scheme="https://cocoonut.top/tags/%E9%9B%B6%E9%A3%9F/"/>
</entry>
<entry>
<title>webpack快速入门</title>
<link href="https://cocoonut.top/2020-03-22/"/>
<id>https://cocoonut.top/2020-03-22/</id>
<published>2020-03-22T15:04:01.000Z</published>
<updated>2020-04-05T05:45:28.514Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><p><img src="/images/2020-03-22/1.png" alt><br>作为前端工程化关键的一环，十分有必要来掌握使用webpack来打包构建项目工程。这里分享我的学习过程，适合作为入门级别来了解webpack的使用。</p><h3 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h3><p>webpack 是一个javascript的静态模块打包器。通过它可以将多种静态资源（js、css、sass、图片、字体等）转换为一个静态js文件，这种方式可以减少页面的请求，优化网页性能。</p><a id="more"></a><h3 id="安装与使用"><a href="#安装与使用" class="headerlink" title="安装与使用"></a>安装与使用</h3><ul><li><p>环境<br>确保你的机器配置了<a href="https://nodejs.org/en/" target="_blank" rel="noopener">Node.js</a>，建议使用最新的稳定版本，并配合nvm管理其版本。</p></li><li><p>兼容性：<br>webpack支持所有符合ES5标准的浏览器（不支持IE8及以下版本）<br>webpack的import()和require.ensure()需要promise，若要想支持低版本需要提前加载polyfill。</p></li><li><p>黑喂狗(#`O′)</p></li></ul><h4 id="一些必要的准备"><a href="#一些必要的准备" class="headerlink" title="一些必要的准备"></a>一些必要的准备</h4><p>新建一个项目，随便命名（不要使用中文目录），在目录下生成一份<code>package.json</code>文件：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$ npm init 或</span><br><span class="line">$ npm init -y</span><br></pre></td></tr></table></figure><p><code>npm init</code> 这个命令的作用就是帮我们互动式地生成一份最简单的 package.json 文件，<code>-y</code>参数则是指定以所有默认选项创建package.json，最为快捷。init 是 initialize 的意思，初始化。</p><div class="note info"><p>package.json 文件定义了项目的各种元信息，包括项目的名称，git repo 的地址，作者等等。最重要的是，其中定义了我们项目的依赖，这样这个项目在部署时，我们就不必将 node_modules 目录也上传到服务器，服务器在拿到我们的项目时，只需要执行 npm install，则 npm 会自动读取 package.json 中的依赖并安装在项目的 node_modules 下面，然后程序就可以在服务器上跑起来了。</p></div><h4 id="两种安装方式"><a href="#两种安装方式" class="headerlink" title="两种安装方式"></a>两种安装方式</h4><p>在项目生成好package.json后，可以使用本地安装或者全局安装（不推荐）</p><h5 id="本地安装"><a href="#本地安装" class="headerlink" title="本地安装"></a>本地安装</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install webpack webpack-cli --save-dev</span><br></pre></td></tr></table></figure><p>使用上面的命令同时安装webpack及其cli工具。<br>-dev参数表示将前面两个依赖安装为开发模式下的依赖，可以简写为-D。</p><blockquote><p>webpack在4.0版本后，和webpack-cli是两个分离的项目，因此需要分别安装。</p></blockquote><p>yarn用户：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add webpack webpack-cli -D</span><br></pre></td></tr></table></figure><h5 id="全局安装"><a href="#全局安装" class="headerlink" title="全局安装"></a>全局安装</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install webpack webpack-cli -g</span><br></pre></td></tr></table></figure><p>不推荐这种安装方式，<br>这会将项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。</p><h4 id="三种使用方式"><a href="#三种使用方式" class="headerlink" title="三种使用方式"></a>三种使用方式</h4><h5 id="npx命令"><a href="#npx命令" class="headerlink" title="npx命令"></a>npx命令</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npx webpack --version</span><br></pre></td></tr></table></figure><p>上面的命令使用webpack-cli来查看webpack的版本。</p><h5 id="访问bin版本"><a href="#访问bin版本" class="headerlink" title="访问bin版本"></a>访问bin版本</h5><p>访问<code>node_modules/.bin/webpack</code>来使用命令</p><h5 id="npm-run-自定义命令"><a href="#npm-run-自定义命令" class="headerlink" title="npm run 自定义命令"></a>npm run 自定义命令</h5><p>在package.json中的scripts字段中定义命令：</p><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">"scripts": {</span><br><span class="line"> "build": "webpack",</span><br><span class="line">},</span><br></pre></td></tr></table></figure><p>这样就可以使用<code>npm run build</code>来启动webpack构建代码。</p><h3 id="五个核心概念"><a href="#五个核心概念" class="headerlink" title="五个核心概念"></a>五个核心概念</h3><p>在项目根目录新建<code>webpack.config.js</code>文件，它是webpack的配置文件。<br>webpack的配置项中具有以下五个核心概念：</p><h4 id="入口（entry）"><a href="#入口（entry）" class="headerlink" title="入口（entry）"></a>入口（entry）</h4><p>指示webpack从哪个文件开始进行打包编译，使用相对路径。<br>单入口简写语法：</p><figure class="highlight javascript"><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></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> config = {</span><br><span class="line"> entry: <span class="string">'./src/index'</span></span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = config;</span><br></pre></td></tr></table></figure><p>多个主入口可以使用数组来传递。</p><h4 id="输出（output）"><a href="#输出（output）" class="headerlink" title="输出（output）"></a>输出（output）</h4><p>配置output选项可以控制webpack如何写入编译文件。<br>webpack只承认一个输出配置。<br>output需要被指定为一个对象，至少要包含以下两个字段：</p><ul><li>filename 用于输出文件的文件名</li><li>path 输出目录的绝对路径</li></ul><figure class="highlight diff"><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><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">const config = {</span><br><span class="line"> // 入口点</span><br><span class="line"> entry: {</span><br><span class="line"> main: './src/index'</span><br><span class="line"> },</span><br><span class="line"> // 输出。不指定时采用默认值</span><br><span class="line"><span class="addition">+ output: {</span></span><br><span class="line"><span class="addition">+ filename: 'bundle.js', //默认值main.js</span></span><br><span class="line"><span class="addition">+ path: path.join(__dirname, './dist1') //默认为 ./dist</span></span><br><span class="line"><span class="addition">+ }</span></span><br><span class="line">};</span><br><span class="line"></span><br><span class="line">module.exports = config;</span><br></pre></td></tr></table></figure><div class="note info"><p>绝对路径的编辑可能需要使用Node.js的相关API，如:<br><a href="http://nodejs.cn/api/path.html#path_path_join_paths" target="_blank" rel="noopener">path.join()</a> 拼接多个路径并返回规范化的路径名<br><a href="http://nodejs.cn/api/modules.html#modules_dirname" target="_blank" rel="noopener">global.__dirname</a> 当前模块的目录名<br><a href="http://nodejs.cn/api/path.html#path_path_resolve_paths" target="_blank" rel="noopener">path.resolve()</a> 将路径或路径片段的序列解析为绝对路径。</p></div><h4 id="loader"><a href="#loader" class="headerlink" title="loader"></a>loader</h4><p>loader用于对模块的源码进行转换，可以在import模块时对其进行预处理。<br>loader可以引入样式、字体、图片、js等各种资源文件，也可以把ts语言转换为js语言，甚至直接<code>import</code>CSS文件。</p><p>官方文档中介绍了三种loader的使用方式：</p><h5 id="配置（推荐）"><a href="#配置（推荐）" class="headerlink" title="配置（推荐）"></a>配置（推荐）</h5><p>在webpack.config.js文件中指定loader</p><h5 id="内联"><a href="#内联" class="headerlink" title="内联"></a>内联</h5><p>在每个import语句中显式指定loader</p><h5 id="cli"><a href="#cli" class="headerlink" title="cli"></a>cli</h5><p>在shell命令中指定它们</p><p>这里的例子采用编写配置的方式指定loader。</p><p>安装依赖：<code>css-loader</code>和<code>style-loader</code>:</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install css-loader style-loader -D</span><br></pre></td></tr></table></figure><p>编写配置<code>webpack.config.js</code>，在<code>config</code>中添加<code>module</code>：</p><figure class="highlight javascript"><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><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>: {</span><br><span class="line"> rules: [</span><br><span class="line"> <span class="comment">// 匹配以.css为后缀的文件，使用css-loader模块进行预处理</span></span><br><span class="line"> <span class="comment">// 这里使用了链式传递，将按照相反的顺序执行</span></span><br><span class="line"> { <span class="attr">test</span>: <span class="regexp">/\.css$/</span>, <span class="attr">use</span>: [<span class="string">'style-loader'</span>, <span class="string">'css-loader'</span>]}</span><br><span class="line"> ]</span><br><span class="line"> }</span><br></pre></td></tr></table></figure><p>示例中 loader 使用<code>test</code>去匹配文件，<code>use</code>字段的模块将<strong>倒序加载</strong>流水线处理。</p><div class="note info"><p>此处的链式写法必须以这样的顺序，即先加载css-loader然后是style-loader，否则编译时webpack无法识别css语法，抛出错误。</p></div><p>在src目录建立<code>main.css</code>文件，编写简单的样式：</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span>{</span><br><span class="line"> <span class="attribute">background-color</span>: <span class="number">#bfc</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>在入口js中引用上面的css：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">require</span>(<span class="string">'./main.css'</span>);</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'hello webpack'</span>);</span><br></pre></td></tr></table></figure><p>使用webpack命令编译：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run dev</span><br></pre></td></tr></table></figure><p>完成后默认会在在dist目录下生成了一个bundle.js，在同级目录下建立一个HTML文件并在其中引入它，打开后会发现通过js引入的样式已经生效。这便是webpack的功劳。</p><h4 id="插件（plugins）"><a href="#插件（plugins）" class="headerlink" title="插件（plugins）"></a>插件（plugins）</h4><p>插件是webpack的核心功能。<br>插件的目的是解决loader无法实现的其他事情。<br>使用方式：安装plugin的依赖，在plugins属性中new一个plugin即可。</p><p><a href="https://www.webpackjs.com/plugins/" target="_blank" rel="noopener">文档</a>中提供了一些官方维护的插件，下例使用其中之一 <code>HtmlWebpackPlugin</code> 演示此功能。</p><div class="note info"><p>HtmlWebpackPlugin 的作用是打包构建后生成一份简单的html文件,并自动注入打包后的脚本文件。</p></div><h5 id="安装："><a href="#安装：" class="headerlink" title="安装："></a>安装：</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install html-webpack-plugin -D</span><br></pre></td></tr></table></figure><h5 id="配置："><a href="#配置：" class="headerlink" title="配置："></a>配置：</h5><p>在webpack.config.js中，插件是以数组的形式定义。<br>先在文件头引入插件：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">'html-webpack-plugin'</span>);</span><br></pre></td></tr></table></figure><p>写入配置项：</p><figure class="highlight javascript"><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">plugins: [</span><br><span class="line"> <span class="keyword">new</span> HtmlWebpackPlugin({</span><br><span class="line"> filename: <span class="string">'index.html'</span>, <span class="comment">// 定义打包生成的文件名</span></span><br><span class="line"> template: <span class="string">'temp.html'</span> <span class="comment">// 定义使用的html模板</span></span><br><span class="line"> })</span><br><span class="line">]</span><br></pre></td></tr></table></figure><p>编译：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run build</span><br></pre></td></tr></table></figure><p>这样的定义会使webpack使用现有的模板和文件名去生成html，打开后即可看到webpack已经为我们自动注入了脚本文件。</p><h5 id="模块热替换（HMR）"><a href="#模块热替换（HMR）" class="headerlink" title="模块热替换（HMR）"></a>模块热替换（HMR）</h5><p>这是<a href="https://www.webpackjs.com/guides/hot-module-replacement/" target="_blank" rel="noopener">一个非常有用的插件</a>，具有模块热替换的功能，当修改js时，会为我们自动应用更改到浏览器，免去了调试时频繁手动刷新浏览器的麻烦。<br>安装：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install webpack-dev-server -D</span><br></pre></td></tr></table></figure><p>在<code>package.json</code>中设置快捷cli命令<code>hot</code>：</p><figure class="highlight diff"><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></pre></td><td class="code"><pre><span class="line">"scripts": {</span><br><span class="line"> "build": "webpack",</span><br><span class="line"><span class="addition">+ "hot": "webpack-dev-server"</span></span><br><span class="line">},</span><br></pre></td></tr></table></figure><p>在<code>webpack.config.js</code>文件头部引入<code>webpack</code>：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> webpack = <span class="built_in">require</span>(<span class="string">'webpack'</span>);</span><br></pre></td></tr></table></figure><p>然后在配置项中添加下面的字段，并且在<code>plugins</code>中做如下增加：</p><figure class="highlight diff"><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><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">const config = {</span><br><span class="line">/* something */</span><br><span class="line"><span class="addition">+ devServer: {</span></span><br><span class="line"><span class="addition">+ hot: true</span></span><br><span class="line"><span class="addition">+ },</span></span><br><span class="line"></span><br><span class="line"> plugins: [</span><br><span class="line"> new HtmlWebpackPlugin({</span><br><span class="line"> filename: 'index.html', // 定义打包生成的文件名</span><br><span class="line"> template: 'temp.html' // 定义使用的html模板</span><br><span class="line"> }),</span><br><span class="line"><span class="addition">+ new webpack.HotModuleReplacementPlugin()</span></span><br><span class="line"> ]</span><br><span class="line">};</span><br><span class="line"></span><br><span class="line">module.exports = config;</span><br></pre></td></tr></table></figure><p>这样即可在项目中使用热更新插件：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run hot</span><br></pre></td></tr></table></figure><p>留意控制台的输出，没有意外的话，你的项目会跑在 <code>localhost:8080</code>，访问它就是了。然后修改你的js，你会发现HMR模块已经为我们自动更新。</p><h4 id="模式（mode）"><a href="#模式（mode）" class="headerlink" title="模式（mode）"></a>模式（mode）</h4><p>针对不同的环境加载不同插件或执行特定的操作。<br>webpack支持以下两种模式：</p><ul><li>development - 开发模式（默认）</li><li>production - 生产模式</li></ul><p>要指定模式很简单：</p><figure class="highlight javascript"><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><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> config = {</span><br><span class="line"><span class="comment">/* ... */</span></span><br><span class="line"> mode: <span class="string">'production'</span>,</span><br><span class="line"><span class="comment">/* ... */</span></span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = config;</span><br></pre></td></tr></table></figure><p>可以在普通脚本中通过访问<code>process.env.NODE_ENV</code>变量来做不同的事情，比如这样：</p><figure class="highlight javascript"><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><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(process.env.NODE_ENV === <span class="string">'development'</span>){</span><br><span class="line"> <span class="comment">// 若为开发模式 则打印此内容</span></span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'base url is localhost'</span>);</span><br><span class="line">}<span class="keyword">else</span>{</span><br><span class="line"> <span class="comment">// 生产模式下是这个</span></span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'base url is cocoonut.top'</span>);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>运行<code>npm run dev</code>打包后，你将会得到你想要的结果。<br>你也许会注意到，在未指定<code>mode</code>字段的时候，webpack会按照<code>development</code>模式打包，并且在控制台反馈这一警告，指定后则不会出现。</p>]]></content>
<summary type="html">
<p><img src="/images/2020-03-22/1.png" alt><br>作为前端工程化关键的一环，十分有必要来掌握使用webpack来打包构建项目工程。这里分享我的学习过程，适合作为入门级别来了解webpack的使用。</p>
<h3 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h3><p>webpack 是一个javascript的静态模块打包器。通过它可以将多种静态资源（js、css、sass、图片、字体等）转换为一个静态js文件，这种方式可以减少页面的请求，优化网页性能。</p>
</summary>
<category term="webpack" scheme="https://cocoonut.top/categories/webpack/"/>
<category term="webpack" scheme="https://cocoonut.top/tags/webpack/"/>
</entry>
<entry>
<title>基于Hexo的博客搭建(2) - 部署篇</title>
<link href="https://cocoonut.top/2019-12-13/"/>
<id>https://cocoonut.top/2019-12-13/</id>
<published>2019-12-13T13:42:01.000Z</published>
<updated>2020-05-12T14:16:51.225Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><p>如果你想让人通过互联网访问到你的博客，那么你有如下几种可能的选择：</p><ul><li>搭建vps</li><li>购买云主机</li><li>使用<a href="https://pages.github.com/" target="_blank" rel="noopener">github pages</a>提供的免费托管服务(除了github，其他的平台或许有类似的服务)</li></ul><p>推荐选择第三种方式，没别的，因为省钱。本文将介绍以此种方式来部署静态网站。</p><h3 id="创建站点存储库"><a href="#创建站点存储库" class="headerlink" title="创建站点存储库"></a>创建站点存储库</h3><p>至此，如果你还没有GitHub账号，去申请一个吧！我保证你不会因此而少块肉的🙃</p><a id="more"></a><p>创建一个名为<code>[你的用户名].github.io</code>的存储库。注意，你的存储库<strong>最好</strong>是这样的命名（当然你也可以去阅读相关的文档来折腾一下与众不同的方式）</p><h3 id="安装git部署插件"><a href="#安装git部署插件" class="headerlink" title="安装git部署插件"></a>安装git部署插件</h3><p>执行下面的命令，开始无痛安装~~</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --save hexo-deployer-git</span><br></pre></td></tr></table></figure><h3 id="部署"><a href="#部署" class="headerlink" title="部署"></a>部署</h3><p>将你的公钥绑定在GitHub上，如果尚未生成公钥对，执行如下命令生成新的公钥对：</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh-keygen</span><br></pre></td></tr></table></figure><p>接下来控制台会和你对话，问你想要保存在哪里，想要设置什么密码等等，一路回车就好。这样，一切都是默认的设置了👌<br>如果你是Win系统，你将在如下目录找到生成的密钥文件<code>id_rsa</code>和公钥文件<code>id_rsa.pub</code>:</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">C:\Users\[用户名]\.ssh</span><br></pre></td></tr></table></figure><p>在github点击你的头像，进入设置页；<br>找到<code>SSH and GPG keys</code>，新建一个SSH key，将<code>id_rsa.pub</code>中的内容复制到文本框中：<br><img src="/images/2019-12-11/2.png" alt></p><p>在<strong>站点配置文件<code>_config.yml</code></strong>中的末尾部分找到如下字段并设置：</p><figure class="highlight plain"><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"># Deployment</span><br><span class="line">## Docs: https://hexo.io/docs/deployment.html</span><br><span class="line">deploy:</span><br><span class="line"> type: 'git'</span><br><span class="line"> repo: [你的仓库地址]</span><br><span class="line"> branch: master</span><br></pre></td></tr></table></figure><div class="note info"><p>注意：此处的<code>#</code>号代表注释，deploy下属字段的缩进不可以修改（其他的也不行，因为这里的缩进是一种语法），否则会报错</p></div><p>在博客根目录下打开终端，输入命令进行部署：</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">hexo cl</span><br><span class="line">hexo g</span><br><span class="line">hexo deploy</span><br></pre></td></tr></table></figure><p>过一段时间后，在浏览器中输入你的仓库名称，就能访问到你的博客了。</p><h3 id="支线任务"><a href="#支线任务" class="headerlink" title="支线任务"></a>支线任务</h3><p>我们的博客至此已经部署成功！接下来的内容对于建站来讲并不是必需的，但能让人更容易、更安全地访问你的博客。</p><h4 id="自定义域名"><a href="#自定义域名" class="headerlink" title="自定义域名"></a>自定义域名</h4><p>许多云服务商都有提供域名服务，没有域名的话可以前往购买。此处仅说明如何将自己的域名指向github page站点。</p><p>新建一个CNAME文件，向其中写入你的顶级域名，像这样：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cocoonut.top</span><br></pre></td></tr></table></figure><p>该文件必须在你的站点仓库的根目录下。为了保证该文件在你每次部署后不被覆盖，你可以将它放在<code>source</code>目录下</p><div class="note info"><p>注意CNAME没有任何文件后缀名，你可以在github仓库中直接新建一个文件，然后再down下来修改</p></div><p>前往你的域名提供商网站，向DNS配置中增加2条<code>CNAME</code>记录：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">@ CNAME XXXX.github.io</span><br><span class="line">www CNAME XXXX.github.io</span><br></pre></td></tr></table></figure><p>将<code>XXXX</code>替换为github你的用户名即可。<br>前者是让你的域名能通过 <a href="https://cocoonut.top">cocoonut.top</a> 这种形式访问;<br>而后者是让你的域名能通过 <a href="https://cocoonut.top">www.cocoonut.top</a>这种形式访问。</p><h4 id="让域名支持HTTPS"><a href="#让域名支持HTTPS" class="headerlink" title="让域名支持HTTPS"></a>让域名支持HTTPS</h4><p>某些浏览器会把没有使用https的网页都标记为“不安全”，如国内某安全卫士旗下的子产品官网：<br><img src="/images/2019-12-11/360.png" alt="XD"></p><div class="note info"><p>HTTPS 是基于 HTTP 协议的，不过它会使用 TLS/SSL 来对数据加密。使用 TLS/ SSL 协议，所有的信息都是加密的，第三方没有办法窃听。并且它提供了一种校验机制，信息一旦被篡改，通信的双方会立刻发现。它还配备了身份证书，防止身份被冒充（如中间人攻击）的情况出现。</p></div><p>使用HTTPS协议通信的数据都是加密的，会更加安全。<br>一般的网站若要支持https，需要向域名服务商申请证书，可能需要支付一定的费用。<br>我们使用的是GitHub的服务，虽然是国外的站点，但目前为止仍在GFW的白名单，你不需要为你的网站备案，而且github为自定义域名提供了这种服务，启用也非常简单：<br>在你的站点仓库下 -> settings 找到Custom domain，填入你的域名；<br>勾选Enforce HTTPS 选项。</p><p>设置后并不会立即生效。你可能需要等待数个小时</p><h4 id="添加站点地图"><a href="#添加站点地图" class="headerlink" title="添加站点地图"></a>添加站点地图</h4><p>站点地图是记录了网站中所有超链接的xml文件，它能帮助搜索引擎等爬虫抓取网页。npm为Hexo提供了站点地图插件，可以很方便的生成站点地图文件。</p><ul><li><strong>被Google收录</strong></li></ul><p>安装插件</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-generator-sitemap --save</span><br></pre></td></tr></table></figure><p>在站点配置文件中添加</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">sitemap:</span><br><span class="line"> path: sitemap.xml</span><br></pre></td></tr></table></figure><p>该插件会在你每次<code>hexo g</code>时，在<code>public</code>下生成<code>sitmap.xml</code>文件。</p><p>前往<a href="https://search.google.com/search-console/about" target="_blank" rel="noopener">Google searchConsole</a></p><p>Google需要验证你拥有该网站，关于验证方式你有多种选择，这里个人认为比较方便的是使用HTML标记：<br><img src="/images/2019-12-11/12.png" alt></p><p>修改主题配置文件，找到 <code>google-site-verification</code>，值修改为 google 提供的 meta 中 content 的内容。</p><div class="note info"><p>如果你没有在配置项中找到该内容，请查看主题目录下的<code>_partials</code>-><code>head.swig</code>中是否有如下内容，如果没有，请手动添加</p></div><p><img src="/images/2019-12-11/13.png" alt="添加meta源标签"><br>然后重启、发布博客。回到Google searchConsole，点击验证按钮，然后提交站点地图。<br><img src="/images/2019-12-11/11.png" alt="提交站点地图"></p><p>提交站点地图后我们的网站还没有被抓取，要等搜索引擎下一次更新索引你才能在 google 上搜到，请耐心等待。</p><ul><li><strong>被百度收录</strong><br>和向Google提供站点地图类似，但GitHub主机禁止百度的爬虫访问，因此要麻烦一些。</li></ul>]]></content>
<summary type="html">
<p>如果你想让人通过互联网访问到你的博客，那么你有如下几种可能的选择：</p>
<ul>
<li>搭建vps</li>
<li>购买云主机</li>
<li>使用<a href="https://pages.github.com/" target="_blank" rel="noopener">github pages</a>提供的免费托管服务(除了github，其他的平台或许有类似的服务)</li>
</ul>
<p>推荐选择第三种方式，没别的，因为省钱。本文将介绍以此种方式来部署静态网站。</p>
<h3 id="创建站点存储库"><a href="#创建站点存储库" class="headerlink" title="创建站点存储库"></a>创建站点存储库</h3><p>至此，如果你还没有GitHub账号，去申请一个吧！我保证你不会因此而少块肉的🙃</p>
</summary>
<category term="Hexo" scheme="https://cocoonut.top/categories/Hexo/"/>
<category term="Hexo" scheme="https://cocoonut.top/tags/Hexo/"/>
</entry>
<entry>
<title>基于Hexo的博客搭建(1) - 建站篇</title>
<link href="https://cocoonut.top/2019-12-07/"/>
<id>https://cocoonut.top/2019-12-07/</id>
<published>2019-12-07T13:47:33.000Z</published>
<updated>2020-05-12T14:16:42.990Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><p><a href="https://hexo.io/zh-cn/" target="_blank" rel="noopener">Hexo</a>是一个快速、简洁且高效的静态博客框架。本文将介绍如何使用Hexo来搭建个人博客。</p><h4 id="环境搭建"><a href="#环境搭建" class="headerlink" title="环境搭建"></a>环境搭建</h4><p>使用Hexo依赖于以下环境和工具：</p><ul><li><a href="https://nodejs.org/en/" target="_blank" rel="noopener">Node.js</a>（建议10.0及以上版本）</li><li>一个比较友好的cli工具，你可以使用cmd或者Powershell，这里推荐<a href="https://git-scm.com/" target="_blank" rel="noopener">git</a></li></ul><p>安装过程相对简单，此处不再赘述，请自行<code>RTFM</code>~</p><h4 id="安装Hexo"><a href="#安装Hexo" class="headerlink" title="安装Hexo"></a>安装Hexo</h4><p>你可以使用如下命令来全局安装Hexo：</p><a id="more"></a><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g hexo-cli</span><br></pre></td></tr></table></figure><p>执行完上述命令后，可以使用下面的命令来确认是否安装成功：</p><figure class="highlight shell"><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><p>如果返回版本号等信息，那么恭喜你，<del>入了一个深坑</del>完成了第一步！</p><h4 id="创建博客目录并初始化"><a href="#创建博客目录并初始化" class="headerlink" title="创建博客目录并初始化"></a>创建博客目录并初始化</h4><p>创建项目目录并进入：</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">mkdir myblog</span><br><span class="line">cd myblog</span><br></pre></td></tr></table></figure><p>此处我建立了名为myblog的文件夹,你可以自定义名称哦~</p><blockquote><p>请注意，后续所有操作默认在博客根目录下进行</p></blockquote><p>初始化blog：</p><figure class="highlight shell"><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><figure class="highlight shell"><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><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">·</span><br><span class="line">├── node_modules //依赖安装目录</span><br><span class="line">├── scaffolds //模板文件夹，新建的文章将会从此目录下的文件中继承格式</span><br><span class="line">| ├── draft.md //草稿模板</span><br><span class="line">| ├── page.md //页面模板</span><br><span class="line">| └── post.md //文章模板</span><br><span class="line">├── source //资源文件夹，用于放置图片、数据、文章等资源</span><br><span class="line">| └── _posts //文章目录</span><br><span class="line">├── themes //主题文件夹</span><br><span class="line">| └── landscape //默认主题</span><br><span class="line">├── .gitignore //指定不纳入git版本控制的文件</span><br><span class="line">├── _config.yml //站点配置文件</span><br><span class="line">├── db.json //数据库文件</span><br><span class="line">├── package.json</span><br><span class="line">└── yarn-lock.json</span><br></pre></td></tr></table></figure><p>在本地启动预览：</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo server</span><br></pre></td></tr></table></figure><p>执行完毕后，默认会在本地4000端口启动web程序：<code>localhost:4000</code><br><img src="/images/2019-12-06/0.png" alt></p><div class="note info"><p>如果默认的4000端口被占用，也没有关系，这条指令还可以附加参数：<br><code>hexo s -p[端口号]</code><br>你也可以同时启动debug模式：<br><code>hexo s -debug</code></p></div><p>在浏览器中你会看到它长这模样：<br><img src="/images/2019-12-06/1.png" alt></p><p>emmm默认的主题有点丑，请不要着急，咱先搭建起来，最后再捯饬好康的主题 ~</p><h4 id="第一篇博客"><a href="#第一篇博客" class="headerlink" title="第一篇博客"></a>第一篇博客</h4><p>虽然Hexo帮我们写好了一篇，但接下来我们要亲手试着写一篇博客，毕竟意义不同嘛(ง •_•)ง</p><p>回到cli，接着上面的操作，我们需要按<code>Ctrl</code>+<code>C</code>先停止在本地运行的网站。新建一篇博客：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo new "my first blog"</span><br></pre></td></tr></table></figure><p>你将看到在<code>.\source\_posts\</code>目录下生成了一个名为<code>my first blog.md</code>的文件，可以用记事本（或者你喜欢的任何编辑器）打开它来编写内容。</p><div class="note info"><p>Hexo 支持使用流行的 <a href="https://guides.github.com/features/mastering-markdown/" target="_blank" rel="noopener">Markdown</a> 语法来撰写文章，请使用支持Markdown语法的编辑器或插件哦</p></div><p>接下来，清理一下数据库文件和<code>public</code>文件夹，然后生成、预览：</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">hexo cl</span><br><span class="line">hexo generate</span><br><span class="line">hexo s</span><br></pre></td></tr></table></figure><p>如果你懂得如何通过阅读文档来学习，则会发现这些常用命令存在<a href="https://hexo.io/zh-cn/docs/" target="_blank" rel="noopener">简写形式</a></p><h4 id="更换主题"><a href="#更换主题" class="headerlink" title="更换主题"></a>更换主题</h4><p><a href="https://github.com/litten/hexo-theme-yilia" target="_blank" rel="noopener">yilia</a>是一个简约美观的博客主题，我们就以此为例来说明如何更换。当然，除了github上开源的主题，<a href="https://hexo.io/themes/" target="_blank" rel="noopener">官方</a>也为我们提供了诸多选择。<br><img src="/images/2019-12-06/2.png" alt></p><p>下载主题到themes目录下</p><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git clone https://github.com/litten/hexo-theme-yilia themes/yilia</span><br></pre></td></tr></table></figure><p>等待执行完成后，你会在<code>themes/yilia</code>下找到下载的内容。</p><h4 id="更改配置信息"><a href="#更改配置信息" class="headerlink" title="更改配置信息"></a>更改配置信息</h4><p>在博客根目录下，找到<code>_config.yml</code>文件，打开修改其<code>theme</code>字段：<br><img src="/images/2019-12-06/3.png" alt></p><p>重新清除缓存、生成、启动预览即可看到效果。</p><div class="note info"><p>根目录下和主题目录下都存在一个<code>_config.yml</code>文件，前者被称为<strong>站点配置文件</strong>，后者被称为<strong>主题配置文件</strong>，绝大多数的内容可以在这里修改，你可以修改这些文件中参数来定制你的blog</p></div><p>至此，我们已经成功在本地搭建起了博客，这样当然还不够，我们建立博客更多是想要与人分享，圈地自萌怎么能行！为此我们有必要将博客部署在远端服务器上，并且能通过互联网访问。</p><p>请务必参考激动人心的部署篇！</p>]]></content>
<summary type="html">
<p><a href="https://hexo.io/zh-cn/" target="_blank" rel="noopener">Hexo</a>是一个快速、简洁且高效的静态博客框架。本文将介绍如何使用Hexo来搭建个人博客。</p>
<h4 id="环境搭建"><a href="#环境搭建" class="headerlink" title="环境搭建"></a>环境搭建</h4><p>使用Hexo依赖于以下环境和工具：</p>
<ul>
<li><a href="https://nodejs.org/en/" target="_blank" rel="noopener">Node.js</a>（建议10.0及以上版本）</li>
<li>一个比较友好的cli工具，你可以使用cmd或者Powershell，这里推荐<a href="https://git-scm.com/" target="_blank" rel="noopener">git</a></li>
</ul>
<p>安装过程相对简单，此处不再赘述，请自行<code>RTFM</code>~</p>
<h4 id="安装Hexo"><a href="#安装Hexo" class="headerlink" title="安装Hexo"></a>安装Hexo</h4><p>你可以使用如下命令来全局安装Hexo：</p>
</summary>
<category term="Hexo" scheme="https://cocoonut.top/categories/Hexo/"/>
<category term="Hexo" scheme="https://cocoonut.top/tags/Hexo/"/>
</entry>
<entry>
<title>高效使用搜索引擎</title>
<link href="https://cocoonut.top/2019-12-05/"/>
<id>https://cocoonut.top/2019-12-05/</id>
<published>2019-12-05T13:47:33.000Z</published>
<updated>2019-12-13T14:02:57.034Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><div class="note info"><p>海量的信息都可以通过搜索引擎这只巨大的爬虫抓取到，学会高效使用搜索引擎是非常必要而且基础的技能，本文整理了一些常用的搜索姿势，熟练使用将很大程度提高你的工作和学习效率。</p></div><h4 id="1-搜索完全匹配的结果"><a href="#1-搜索完全匹配的结果" class="headerlink" title="1.搜索完全匹配的结果"></a>1.搜索完全匹配的结果</h4><p><code>"Red Dead Redemption"</code> 双引号表示完全匹配，结果中仅出现与搜索文本完全相同的内容</p><h4 id="2-从搜索结果中排除特定内容"><a href="#2-从搜索结果中排除特定内容" class="headerlink" title="2.从搜索结果中排除特定内容"></a>2.从搜索结果中排除特定内容</h4><p><code>a -b</code> 搜索包含a但不包含b的结果（注意a后面的空格不能省略）</p><h4 id="3-搜索通配符-amp-未知词"><a href="#3-搜索通配符-amp-未知词" class="headerlink" title="3.搜索通配符&未知词"></a>3.搜索通配符&未知词</h4><p><code>长城防*墙</code> 星号表示任意字符串</p><a id="more"></a><h4 id="4-搜索社交媒体"><a href="#4-搜索社交媒体" class="headerlink" title="4.搜索社交媒体"></a>4.搜索社交媒体</h4><p><code>@something</code> 搜索社群中的相关内容,如微博等</p><h4 id="5-组合搜索"><a href="#5-组合搜索" class="headerlink" title="5.组合搜索"></a>5.组合搜索</h4><p><code>A OR B</code> 在关键词A和B中间加OR，表示逻辑“或”操作,将返回包含有A或者B的内容,或者同时包含A与B</p><h4 id="6-站点内搜索"><a href="#6-站点内搜索" class="headerlink" title="6.站点内搜索"></a>6.站点内搜索</h4><p><code>site:zhihu.com 西瓜</code> 在相应的网站或域名前加上<code>site:</code>,将只返回在该站点内的结果</p><div class="note info"><p>需要注意的是，这些搜索技巧是可以相互组合使用的，这会让搜索结果更加趋近你想要的信息。如：<br><code>site:zhihu.com *瓜 -西瓜</code>可以抓取知乎上关于各种瓜（除了西瓜）的故事🙃</p></div><h4 id="7-搜索词汇以及相关文章"><a href="#7-搜索词汇以及相关文章" class="headerlink" title="7.搜索词汇以及相关文章"></a>7.搜索词汇以及相关文章</h4><p><code>difine:word</code> 将返回<code>word</code>的词汇定义或其相关文章</p><h4 id="8-搜索特定文件格式"><a href="#8-搜索特定文件格式" class="headerlink" title="8.搜索特定文件格式"></a>8.搜索特定文件格式</h4><p><code>火龙果 filetype:ppt</code> 将返回关键词为ppt格式的链接</p><h4 id="9-搜索标题内包含关键词的结果"><a href="#9-搜索标题内包含关键词的结果" class="headerlink" title="9.搜索标题内包含关键词的结果"></a>9.搜索标题内包含关键词的结果</h4><p><code>intitle:象牙</code> 将返回标题中含有关键字的结果</p><h4 id="10-搜索网页中含有某链接的结果"><a href="#10-搜索网页中含有某链接的结果" class="headerlink" title="10.搜索网页中含有某链接的结果"></a>10.搜索网页中含有某链接的结果</h4><p><code>link:http://baidu.com</code> 结果为包含此链接的页面</p><h4 id="11-搜索域名中包含特定内容的网站"><a href="#11-搜索域名中包含特定内容的网站" class="headerlink" title="11.搜索域名中包含特定内容的网站"></a>11.搜索域名中包含特定内容的网站</h4><p><code>inurl:diygod</code> 结果为URL中含有diygod的网址</p>]]></content>
<summary type="html">
<div class="note info"><p>海量的信息都可以通过搜索引擎这只巨大的爬虫抓取到，学会高效使用搜索引擎是非常必要而且基础的技能，本文整理了一些常用的搜索姿势，熟练使用将很大程度提高你的工作和学习效率。</p></div>
<h4 id="1-搜索完全匹配的结果"><a href="#1-搜索完全匹配的结果" class="headerlink" title="1.搜索完全匹配的结果"></a>1.搜索完全匹配的结果</h4><p><code>&quot;Red Dead Redemption&quot;</code> 双引号表示完全匹配，结果中仅出现与搜索文本完全相同的内容</p>
<h4 id="2-从搜索结果中排除特定内容"><a href="#2-从搜索结果中排除特定内容" class="headerlink" title="2.从搜索结果中排除特定内容"></a>2.从搜索结果中排除特定内容</h4><p><code>a -b</code> 搜索包含a但不包含b的结果（注意a后面的空格不能省略）</p>
<h4 id="3-搜索通配符-amp-未知词"><a href="#3-搜索通配符-amp-未知词" class="headerlink" title="3.搜索通配符&amp;未知词"></a>3.搜索通配符&amp;未知词</h4><p><code>长城防*墙</code> 星号表示任意字符串</p>
</summary>
<category term="零食" scheme="https://cocoonut.top/categories/%E9%9B%B6%E9%A3%9F/"/>
<category term="零食" scheme="https://cocoonut.top/tags/%E9%9B%B6%E9%A3%9F/"/>
</entry>
<entry>
<title>开启chrome实验中的特性</title>
<link href="https://cocoonut.top/2019-12-02/"/>
<id>https://cocoonut.top/2019-12-02/</id>
<published>2019-12-01T16:58:33.000Z</published>
<updated>2019-12-13T14:02:42.583Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><h4 id="当我们想试用那些还不被广泛支持的实验性特性时，可以在地址栏输入"><a href="#当我们想试用那些还不被广泛支持的实验性特性时，可以在地址栏输入" class="headerlink" title="当我们想试用那些还不被广泛支持的实验性特性时，可以在地址栏输入:"></a>当我们想试用那些还不被广泛支持的实验性特性时，可以在地址栏输入:</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">chrome://flags#enable-experimental-web-platform-features</span><br></pre></td></tr></table></figure><br><p><img src="/images/2019-12-02/1.png" alt></p><p>将选项设置为enabled</p><p>这样就可以开启实验中的特性了</p>]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" cla
</summary>
<category term="零食" scheme="https://cocoonut.top/categories/%E9%9B%B6%E9%A3%9F/"/>
<category term="零食" scheme="https://cocoonut.top/tags/%E9%9B%B6%E9%A3%9F/"/>
</entry>
<entry>
<title>第一篇博客</title>
<link href="https://cocoonut.top/2019-11-30/"/>
<id>https://cocoonut.top/2019-11-30/</id>
<published>2019-11-29T16:58:33.000Z</published>
<updated>2020-04-08T15:08:51.258Z</updated>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><h4 id="第一次总是意义非凡，值得纪念的"><a href="#第一次总是意义非凡，值得纪念的" class="headerlink" title="第一次总是意义非凡，值得纪念的"></a>第一次总是意义非凡，值得纪念的</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hello world</span><br></pre></td></tr></table></figure><h4 id="开始啦！"><a href="#开始啦！" class="headerlink" title="开始啦！"></a>开始啦！</h4><p>来回折腾，博客终于成功上线了。感谢<a href="https://diygod.me/" target="_blank" rel="noopener">DIYgod</a>大佬开源的<a href="https://github.com/DIYgod/hexo-theme-sagiri" target="_blank" rel="noopener">Sagiri主题</a>。</p><p>纱雾很可爱，主题也是~~</p>]]></content>
<summary type="html">
<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" cla
</summary>
<category term="学习笔记" scheme="https://cocoonut.top/categories/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"/>
<category term="学习笔记" scheme="https://cocoonut.top/tags/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"/>
</entry>
</feed>