怎样创建自己的博客呢?
<div><p>
本文目录:
</p>
<ol>
<li>
一、安装并配置Hexo
</li>
<li>
二、部署到托管平台
</li>
<li>
三、效果展示
</li>
</ol>
<p>
首先要确保电脑中已经安装了node.js和git。网络上有大量关于这两个软件安装的过程,在此不再赘述。
</p>
<p>
<strong>一、安装并配置Hexo</strong>
</p>
<p>
只需要一步,就可以轻松安装Hexo:
</p>
<pre class="prettyprint"><span class="pln">npm install </span><span class="pun">-</span><span class="pln">g hexo</span><span class="pun">-</span><span class="pln">cli</span></pre>
<p>
安装后,我们需要生成必要的文件:
</p>
<pre class="prettyprint"><span class="pln">hexo init my_blog
cd my_blog
npm install</span></pre>
<p>
然后我们就可以使用如下命令来本地预览我们的博客网站了:
</p>
<pre class="prettyprint"><span class="pln">hexo s</span></pre>
<p>
默认情况下效果如下图:
</p>
<div class="pgc-img">
<div id="attachment_52100" class="wp-caption aligncenter">
<img class="size-full wp-image-52100" src="https://www.teamczyx.com/article/1603285829.jpg" width="760" height="455" alt="怎样创建自己的博客呢?" title="怎样创建自己的博客呢?" />
<p id="caption-attachment-52100" class="wp-caption-text">
怎样创建自己的博客呢?
</p>
</div>
<p>
<br />
</p>
<p class="pgc-img-caption">
<br />
</p>
</div>
<p>
我们可以挑选自己喜欢的主题,我个人倾向于使用Next主题,安装主题的方式非常简单,下载主题后解压放在themes文件夹中即可,在这里我们使用git克隆到本地。
</p>
<pre class="prettyprint"><span class="pln">git clone https</span><span class="pun">:</span><span class="com">//github.com/theme-next/hexo-theme-next.git themes/next</span></pre>
<h1>
<strong>二、部署到托管平台</strong>
</h1>
<p>
很多人使用Github,不过我们在这里使用的是腾讯旗下的CODING平台。它们都提供了<strong>免费</strong>的网站服务。
</p>
<p>
注册后,新建一个项目:
</p>
<div class="pgc-img">
<div id="attachment_52101" class="wp-caption aligncenter">
<img class="size-full wp-image-52101" src="https://www.teamczyx.com/article/1603285832.jpg" width="760" height="466" alt="怎样创建自己的博客呢?" title="怎样创建自己的博客呢?" />
<p id="caption-attachment-52101" class="wp-caption-text">
怎样创建自己的博客呢?
</p>
</div>
<p>
<br />
</p>
<p class="pgc-img-caption">
<br />
</p>
</div>
<p>
然后我们把项目的git地址拷贝下来:
</p>
<div class="pgc-img">
<div id="attachment_52102" class="wp-caption aligncenter">
<img class="size-full wp-image-52102" src="https://www.teamczyx.com/article/1603285833.jpg" width="760" height="466" alt="怎样创建自己的博客呢?" title="怎样创建自己的博客呢?" />
<p id="caption-attachment-52102" class="wp-caption-text">
怎样创建自己的博客呢?
</p>
</div>
<p>
<br />
</p>
<p class="pgc-img-caption">
<br />
</p>
</div>
<p>
还有一步是必要的,那就是把我们电脑的公钥添加进来,公钥的生成可以百度搜索一下,非常简单:
</p>
<div class="pgc-img">
<div id="attachment_52103" class="wp-caption aligncenter">
<img class="size-full wp-image-52103" src="https://www.teamczyx.com/article/1603285833-1.jpg" width="760" height="466" alt="怎样创建自己的博客呢?" title="怎样创建自己的博客呢?" />
<p id="caption-attachment-52103" class="wp-caption-text">
怎样创建自己的博客呢?
</p>
</div>
<p>
<br />
</p>
<p class="pgc-img-caption">
<br />
</p>
</div>
<p>
在我们的博客目录下可以看到_config.yml文件,打开找到themes和deploy部分并编辑:
</p>
<pre class="prettyprint"><span class="com">## Themes: https://hexo.io/themes/</span><span class="pln"> theme</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">next</span><span class="pln"> </span><span class="com"># Deployment</span><span class="pln"> deploy</span><span class="pun">:</span><span class="pln"> type</span><span class="pun">:</span><span class="pln"> git
repo</span><span class="pun">:</span><span class="pln"> git@git</span><span class="pun">.</span><span class="pln">dev</span><span class="pun">.</span><span class="pln">tencent</span><span class="pun">.</span><span class="pln">com</span><span class="pun">:</span><span class="pln">data_insights</span><span class="pun">/</span><span class="pln">my_blog</span><span class="pun">.</span><span class="pln">git
branch</span><span class="pun">:</span><span class="pln"> master</span></pre>
<p>
把我们刚才复制的项目地址粘贴进来,默认使用master分支。然后把主题的名字贴进来,注意,这里主题的名称要跟我们克隆(或者复制)进来的文件夹名称一致。
</p>
<p>
本地预览一下:
</p>
<pre class="prettyprint"><span class="pln">hexo s</span></pre>
<div class="pgc-img">
<div id="attachment_52104" class="wp-caption aligncenter">
<img class="size-full wp-image-52104" src="https://www.teamczyx.com/article/1603285834.jpg" width="760" height="455" alt="怎样创建自己的博客呢?" title="怎样创建自己的博客呢?" />
<p id="caption-attachment-52104" class="wp-caption-text">
怎样创建自己的博客呢?
</p>
</div>
<p>
<br />
</p>
<p class="pgc-img-caption">
<br />
</p>
</div>
<p>
简洁而美观,后续我们可以再调整主题和样式,我们先来尝试部署到线上。
</p>
<p>
我们需要先安装hexo-deployer-git:
</p>
<pre class="prettyprint"><span class="pln">npm install hexo</span><span class="pun">-</span><span class="pln">deployer</span><span class="pun">-</span><span class="pln">git </span><span class="pun">--</span><span class="pln">save</span></pre>
<p>
安装完成后,我们输入:
</p>
<pre class="prettyprint"><span class="pln">hexo clean </span><span class="pun">&&</span><span class="pln"> hexo generate </span><span class="pun">&&</span><span class="pln"> hexo deploy</span></pre>
<p>
或者简化为
</p>
<pre class="prettyprint"><span class="pln">hexo clean </span><span class="pun">&&</span><span class="pln"> hexo g </span><span class="pun">&&</span><span class="pln"> hexo d</span></pre>
<p>
好,在我们的CODING平台,已经可以看到代码了:
</p>
<div class="pgc-img">
<div id="attachment_52105" class="wp-caption aligncenter">
<img class="size-full wp-image-52105" src="https://www.teamczyx.com/article/1603285834-1.jpg" width="760" height="466" alt="怎样创建自己的博客呢?" title="怎样创建自己的博客呢?" />
<p id="caption-attachment-52105" class="wp-caption-text">
怎样创建自己的博客呢?
</p>
</div>
<p>
<br />
</p>
<p class="pgc-img-caption">
<br />
</p>
</div>
<p>
然后,我们开启Pages服务:
</p>
<div class="pgc-img">
<div id="attachment_52106" class="wp-caption aligncenter">
<img class="size-full wp-image-52106" src="https://www.teamczyx.com/article/1603285836.jpg" width="760" height="466" alt="怎样创建自己的博客呢?" title="怎样创建自己的博客呢?" />
<p id="caption-attachment-52106" class="wp-caption-text">
怎样创建自己的博客呢?
</p>
</div>
<p>
<br />
</p>
<p class="pgc-img-caption">
<br />
</p>
</div>
<p>
好了,现在就可以访问我们的个人博客了。
</p>
<p>
<strong>三、效果展示</strong>
</p>
<p>
给大家看一下我的博客的效果,所有的调整和定制都非常简单,大家可以在hexo和所使用的主题的官方文档中找到你需要的东西。
</p>
<div class="pgc-img">
<div id="attachment_52107" class="wp-caption aligncenter">
<img class="size-full wp-image-52107" src="https://www.teamczyx.com/article/1603285839.png" width="760" height="466" alt="怎样创建自己的博客呢?" title="怎样创建自己的博客呢?" />
<p id="caption-attachment-52107" class="wp-caption-text">
怎样创建自己的博客呢?
</p>
</div>
<p>
<br />
</p>
<p class="pgc-img-caption">
<br />
</p>
</div>
<div class="pgc-img">
<div id="attachment_52108" class="wp-caption aligncenter">
<img class="size-full wp-image-52108" src="https://www.teamczyx.com/article/1603285841.jpg" width="760" height="466" alt="怎样创建自己的博客呢?" title="怎样创建自己的博客呢?" />
<p id="caption-attachment-52108" class="wp-caption-text">
怎样创建自己的博客呢?
</p>
</div>
<p>
<br />
</p>
<p class="pgc-img-caption">
<br />
</p>
</div>
<div class="pgc-img">
<div id="attachment_52109" class="wp-caption aligncenter">
<img class="size-full wp-image-52109" src="https://www.teamczyx.com/article/1603285842.jpg" width="760" height="466" alt="怎样创建自己的博客呢?" title="怎样创建自己的博客呢?" />
<p id="caption-attachment-52109" class="wp-caption-text">
怎样创建自己的博客呢?
</p>
</div>
<p>
<br />
</p>
<p class="pgc-img-caption">
<br />
</p>
</div>
<div class="pgc-img">
<div id="attachment_52110" class="wp-caption aligncenter">
<img class="size-full wp-image-52110" src="https://www.teamczyx.com/article/1603285844.jpg" width="760" height="466" alt="怎样创建自己的博客呢?" title="怎样创建自己的博客呢?" />
<p id="caption-attachment-52110" class="wp-caption-text">
怎样创建自己的博客呢?
</p>
</div>
<p>
<br />
</p>
<p class="pgc-img-caption">
<br />
</p>
</div>
<div class="pgc-img">
<div id="attachment_52111" class="wp-caption aligncenter">
<img class="size-full wp-image-52111" src="https://www.teamczyx.com/article/1603285845.jpg" width="760" height="501" alt="怎样创建自己的博客呢?" title="怎样创建自己的博客呢?" />
<p id="caption-attachment-52111" class="wp-caption-text">
怎样创建自己的博客呢?
</p>
</div>
<p>
<br />
</p>
<p class="pgc-img-caption">
<br />
</p>
</div>
<div class="pgc-img">
<div id="attachment_52112" class="wp-caption aligncenter">
<img class="size-full wp-image-52112" src="https://www.teamczyx.com/article/1603285846.jpg" width="760" height="501" alt="怎样创建自己的博客呢?" title="怎样创建自己的博客呢?" />
<p id="caption-attachment-52112" class="wp-caption-text">
怎样创建自己的博客呢?
</p>
</div>
<p>
<br />
</p>
<p class="pgc-img-caption">
<br />
</p>
</div>
<p>
好了,接下来你也可以<strong>免费</strong>创建自己的个人博客了!
</p>
</div>
页:
[1]