人亦已歌 发表于 2023-6-24 15:59:40

怎样创建自己的博客呢?

<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">&amp;&amp;</span><span class="pln"> hexo generate </span><span class="pun">&amp;&amp;</span><span class="pln"> hexo deploy</span></pre>
        <p>
                或者简化为
        </p>
<pre class="prettyprint"><span class="pln">hexo clean </span><span class="pun">&amp;&amp;</span><span class="pln"> hexo g </span><span class="pun">&amp;&amp;</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]
查看完整版本: 怎样创建自己的博客呢?