搭建个人博客

修炼, 文档/记录

一直都想着搞一个自己的个人博客, 拖着这么久, 最近终于开始动手了. 故留下一篇完整的记录, 若你也刚好有相同的需要, 那这篇文章应该恰好能够帮助到你.

准备

  1. 云服务器
  2. 个人域名

如果没有云服务器, 将应用跑在自己的电脑上, 通过内网穿透大概也能达到效果, 但是个人电脑实在没有稳定性可言, 万一停个电断个网啥的就挂了. 所以, 一个云服务器还是很有必要的.

如果没有个人域名, 直接通过 IP 访问也可以, 但是毕竟不够友好, 而且确定 IP 就意味着你无法更换服务器. 比如你想将服务器从内地挪到香港, 从阿里云挪到华为云, 就会导致所有原来的访问连接统统失效, 而有域名的话改一下 dns 即可. 所以, 一个域名还是很有必要的.

简单算一下成本

  • 云服务器: 24-60每月
    • 阿里云香港轻量服务器基础版: 24/月
      • 便宜, 无需备案, 但是 内地访问速度会有些慢
    • 阿里云北京轻量服务器基础版: 60/月
      • 需要备案, 但是访问速度快. 60也不算贵.
  • 域名: .com后缀, 每年60

启动

博客系统选择了当下比较成熟的wordpress, 毕竟自己从头搭一个出来太费时间.

搭建方式选择使用docker容器, 这是为了后面进行迁移考虑, 使用docker的话可以直接将文件copy走即可. 毕竟是自己出钱买服务器, 自然是哪里优惠多就到哪里去了.

另外, 还使用nginx对容器进行了代理, 这是为了方便日后的扩展, 比如加个二级域名项目等比较方便. 同时, nginx可以将后台地址仅对指定 IP 开放, 可提升网站安全.

最终生成的docker-composer文件, 可以通过: https://github.com/hujingnb/docker_composer/tree/master/wordpress 进行下载, 比较多就不帖出来了. 下载后基本开箱即用, 当你看到下面这个页面, 就说明这第一步你成功了:

image-20210616220210806

为了配这个nginx代理, 我中间踩了好多坑, 唉.

如果你需要更换云服务实例的话, 直接将docker-composer文件夹下载下来, 然后上传到新的服务器重新启动就行, 数据都不会丢, 是不是很方便.

个性化

更换皮肤

去挑选一个你喜欢的皮肤, 并定制为适合你的样子. 有很多免费的, 当然, 选择付费或自己实现也不是不可以.

推荐几个免费的, 感觉还不错, 可以试一下:

  • generatepress
  • Period
  • Allium
  • kratos
  • Twenty Twelve

这里在选择一个之后, 还需要对网站的页面, 布局, 元素等等进行调整, 还比较耗时的.

支持 markdown

安装插件WP Githuber MD, 界面如下, 感觉还不错:

image-20210616230542481

添加文章目录

显示文章目录, 这里提两个插件.

Rich Table of Contents

image-20210618220022542

优点就是, 漂亮. 但是它的目录默认插入到了markdown生成文件的第三个标题下了, 而且, 启用这个插件之后, 页面的标题锚点就会失效.

Easy Table of Contents,

image-20210618220530590

识别没问题, markdown的标题锚点也没问题, 可以研究一下怎么自定义样式就完美了.

留言板

这里咱们暂时不需要多么高大上, 只需要新建一个页面, 就可以在这个页面留言了. 接下来就是把页面挂在主页菜单上, 添加一个入口就结束了. 这是创建的效果:

image-20210619223548770

自定义代码

因为搜索各种解决方法的时候, 都需要自定义方法. 但是给出的自定义方法的方式, 是修改主题的functions.php文件, 那就有个问题了, 如果我之后更换了主题, 那不就相当于之前设置的所有都无效了, 需要重新设置一遍么.

这里可以通过插件的方式来处理, 安装插件: Code Snippets

之后, 你所有自定义的代码片段, 都可以放到这里了, 不用怕更换主题丢失的问题了. 这时安装之后的界面:

image-20210620165015743

先不急着用, 甚至先不用急着装, 等下面你用到了, 再回来装上也不迟. 不过增加插件会造成数据库查询, 拖慢响应速度, 故我没有使用这个插件, 而是选择了直接修改代码的方式.

邮件发送设置

如果你希望通过邮件收到网站的信息的话(比如评论信息等), 你需要配置邮箱服务器来用于发送邮件.

最简单的方式是, 安装插件: WP Mail SMTP. 后面就是一堆配置了, 需要注意的一点, 配置的SMTP 密码, 并不是你的账号密码哦. 而是授权码, 比如我使用的126邮箱, 就是这个玩意

image-20210619232132251

配置好之后, 一旦有新的评论, 会发送一封邮件到你的管理员邮箱中. 而且邮件中还会直接给出是否通过的链接, 点一下就处理完了, 好贴心哦.

image-20210619232348591

另外, 如果你要开启登录注册功能的话, 也是需要邮箱验证的.

设置邮件异步发送

默认的邮件发送方式是同步的, 但是经过我的尝试, 发现同步发送邮件会拖慢接口速度, 尤其是我的服务器在香港, 邮件服务器又使用的163邮箱, 每次发表评论的时候都要等好久, 甚至拿不到响应直接超时了. 经过测试, 将评论时发送邮件通知我关掉就好了, 很明显是发送邮件的操作拖慢了接口. 于是我想到将邮件的发送改成异步, 这样就可以解放接口了.

经过查找, 找到了网上有人提出的解决方案, 原文地址: https://wordpress.stackexchange.com/questions/185295/how-to-make-wordpress-emails-async 通过执行定时脚本的方式, 将发送邮件改到异步执行.

但是因为我安装了SMTP插件, 直接使用网站会报错, 怎么办呢? 有了, 我直接去修改插件就好了, 反正代码都在我手上. 经过调试, 修改文件: wp-content/plugins/wp-mail-smtp/wp_mail_smtp.php文件, 将下方代码插入到文件开头处即可: 

<?php

// 异步执行邮件发送的操作, 当前不是脚本的时候重写邮件发送方法
if ( !defined( 'DOING_CRON' ) ||  !DOING_CRON) {
    function wp_mail() {
        $args = func_get_args();
        // 这里添加随机数, 是因为 wordpress 会删除10分钟内相同的任务
        $args[] = mt_rand();
        // 添加定时任务, 5s 后运行.
        wp_schedule_single_event( time() + 5, 'cron_send_mail', $args );
    }
    // 如果是接口, 下面所有的操作都不执行了, 直接在插件入口处退出
    return;
}

// 脚本发送邮件的方法
function example_cron_send_mail() {
    $args = func_get_args();
    // 将最后添加的随机数去掉
    array_pop( $args );
        // 若最后一个参数是 'content_type_html', 则修改 content-type. 这是一个自定义参数
    // 这时为了方式接口修改了 content-type, 但是到脚本这里就没有了, 故在这里重新设置一下
    $endParam = end($args);
    if($endParam == 'content_type_html'){
      add_filter('wp_mail_content_type', function(){return 'text/html';});
    }
    // 此方法为定时任务, 脚本执行
    // 当脚本时, wp_mail 不会被修改, 是默认发送邮件的操作
    call_user_func_array( 'wp_mail', $args );
}
// 这里多接了几个参数, 是为了防止以后参数增加
add_action( 'cron_send_mail', 'example_cron_send_mail', 10, 10 );

可以安装插件 Cron Status Checker 来测试服务器脚本运行, 该插件可以每天测试一下定时任务是否可以运行, 出现异常情况是发送邮件提醒, 也可以手动测试.

这里注意, wordpress 的脚本是通过调用接口的形式实现的, 因为在云服务上访问域名是没有问题的, 但如果是在自己本地调试时, 从docker容器中直接访问域名是访问不到项目接口的, 所以这里要将wordpress容器中的域名映射到宿主主机. 修改hosts文件即可, 想知道宿主主机的 IP? 在容器中ping一下host.docker.internal就好了.

这里使用的方法直接修改插件代码, 方式有点粗暴了. 另外, 在设置之后, 你会发现左侧的设置菜单不见了, 也是因为我们添加的这段代码引起的. 只要去掉就好了, 不过不影响正常使用的哈. 虽然带来了一些问题, 但是为了速度, 都可以忍受, 后面再找找有没有更好的解决方法.

image-20210620221351931

设置回复邮件提醒

因为我的网站没有启用登录注册功能, 那么如果别人在网站下留言被回复了, 我怎么才能通知到他呢? 通过邮箱提醒.

直接通过插件安装: Comment Reply Email Notification

安装之后, 在评论处就会有一个是否需要通知的勾选框, 选中后填写的邮箱地址就会收到通知了. 当然, 使用通知的前提是, 你配了SMTP服务, 可见上面的 邮件发送设置 . 对了, 在插件的设置中, 可以将此勾选框设置为默认选中

image-20210620195939281

对了, 因为刚才我们将邮件的发送改到了异步脚本执行, 所以这里要修改一下插件的源码, 好到了脚本那边, 可以正确发送 html 邮件.

修改: wp-content/plugins/comment-reply-email-notification/cren_plugin.php, 在文件中调用wp_mail方法的地方, 添加第四个参数: content_type_html, 修改后的代码: wp_mail($email, $title, $body, 'content_type_html'); 关于为什么添加这个参数, 详见 设置邮件异步发送, 如果你没有修改异步发送, 自然就不用了.

当有人回复了你的评论, 你将收到这样一封邮件:

image-20210620200228918

不得不说, 这回复的邮件着实有点简陋了. 想改怎么办, 可以.

直接修改邮件模板, 模板位置: wp-content/plugins/comment-reply-email-notification/templates/cren/notification.php. 下面是我修改之后的模样.

image-20210620220343480

为了方便大家, 我直接把我修改之后的回复样式放这了, 样式来源: https://www.ihewro.com/archives/468/

<div class="nui-fClear sR0"><br/>
  <table style="width: 99.8%;height:99.8% ">
    <tbody>
    <tr>
      <td style="background:#FAFAFA">
        <div style="background-color:white;border-left: 2px solid #555555;box-shadow:0 1px 3px #AAAAAA;line-height:180%;padding:0 15px 12px;width:500px;margin:50px auto;color:#555555;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size:12px;">
          <h2 style="border-bottom:1px solid #DDD;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;"><span style="color: #f59200;font-weight: bold;">> </span>您在 <a style="text-decoration:none;color: #f59200;" href="https://hujingnb.com">烟草的香味</a> 博客上的留言有回复啦！</h2>
          <div style="padding:0 12px 0 12px;margin-top:18px">
            <p><?php echo $parent->comment_author; ?> 同学，您曾在文章 <a href="<?php echo get_permalink($parent->comment_post_ID) ?>"><?php echo get_the_title($parent->comment_post_ID) ?></a> 上发表评论</p>
            <p style="background-color: #f5f5f5;border: 0px solid #DDD;padding: 10px 15px;margin:18px 0"><?php echo esc_html($parent->comment_content); ?></p>
            <p><?php echo $comment->comment_author; ?> 给您的回复如下:</p>
            <p style="background-color: #f5f5f5;border: 0px solid #DDD;padding: 10px 15px;margin:18px 0"><?php echo esc_html($comment->comment_content); ?></p>
            <p>您可以点击 <a style="text-decoration:none; color:#f59200" href="<?php echo get_comment_link($parent->comment_ID) ?>">点击这里回复 </a>，欢迎再来 <a style="text-decoration:none; color:#f59200" href="http:// hujingnb.com">烟草的香味</a>。</p>
          </div>
        </div>
      </td>
    </tr>
    </tbody>
    </table>
  <br />
  <br />
</div>

支持搜索

wordpress自己的搜索比较不如人意, 所以就想借助 Google 搜索的强大. 我本来的目标是, 只要有一个按钮, 能够直接跳转到Google 搜索就行了. 网上找了找, 不是太复杂, 就是效果不尽人意. 就一个连接, 比如搜索的关键词是markdown, 那就直接跳到连接:

https://www.google.com/search?q=markdown site:https//hujingnb.com

不就行了么, 就这么点事. 最后还是决定自己搞. 这里直接使用默认主题的搜索框举例

image-20210618231847293

我的想法是, 直接拿到这个搜索框的HTML代码, 然后拦截搜索按钮的点击事件, 将修改后的 HTML填回页面即可.

怎么拿到这个搜索框的代码呢? 很简单, 将搜索框加上, 页面源码拿下来, 在去掉搜索框, 拿到页面源码, 接着找不同就好了. 下面是我拿到的默认主题的搜索框: 

<section id="search-4" class="widget widget_search">
  <form role="search"  method="get" class="search-form" action="http://localhost/">
    <label for="search-form-1">搜索…</label>
    <input type="search" id="search-form-1" class="search-field" value="" name="s" />
    <input type="submit" class="search-submit" value="搜索" />
</form>
</section>

将其进行简单的改造: 

<section id="search-4" class="widget widget_search">
<form role="search"  method="get" class="search-form" action="http://localhost/">
    <label for="search-form-1">搜索…</label>
    <input type="search" id="search-form-1" class="search-field" value="" name="s" />
    <input type="submit" class="search-submit" id='search-googld' value="搜索"/>
</form>
</section>
<script>
  window.document.getElementById('search-googld').onclick = function (e){
    var searchValue = document.getElementById('search-form-1').value;
    window.location.href = 'https://www.google.com/search?q=' + searchValue + ' site:https://www.cnblogs.com/hujingnb/';
    e.preventDefault();
  };
</script>

好, 现在就可以删除原本的搜索框, 添加我们自定义的搜索框了.

image-20210618232927930

另外, 如果你使用了其他主题, 也可以如法炮制. 这样, 点击搜索之后, 当前页面就会跳转到 Google 搜索, 我觉得这样就已经够用了.

然后可以注册一下百度和 Google 的索引控制台, 查看网站被收录的信息以及提交索引建议.

百度索引地址: https://ziyuan.baidu.com/property/index

Google 索引地址: https://search.google.com/search-console/welcome

修改页脚标识

其默认的页脚标识如下:

image-20210620163843405

这里需要进行自定义修改, 我想将构建于 XXX去掉, 如果有本案信息的话, 也可以添加到这里.

经过搜索, 找到了官方论坛中给出的答案, 修改/wp-content/themes/主题名/functions.php文件, 添加以下代码即可, 不过还记得前面装的插件么, 将这段代码添加到代码片段中也可以. 自定义代码

/* 更换主页下方的版权信息 */
add_action('after_setup_theme','generate_copyright_remove_default_message');
function generate_copyright_remove_default_message()
{

        remove_action( 'generate_credits', 'generate_add_footer_info' );
        remove_action( 'generate_copyright_line','generate_add_login_attribution' );
}

/**
 * Add the custom copyright
 * @since 0.1
 */
add_action('generate_credits','generate_copyright_add_custom_message');
function generate_copyright_add_custom_message()
{
?>
        Copyright © <?php echo date("Y") ?> <a href="https://hujingnb.com"> 烟草的香味</a>
<?php
}

结果如下:

image-20210620164243346

访问统计

有些主题本身就已经支持添加统计代码了. 但是有一些没有支持, 怎么办呢? 两个方法.

1. 安装插件

安装插件Tracking Code, 此插件可以在全站的头部或尾部添加HTML代码. 简单方便.

2. 修改主题

到./wp-content/themes/主题名 文件夹下, 其中主题名为你使用的主题. 修改其中的footer.php文件即可. 此文件为页脚.

什么? 统计代码去哪找? 百度统计, 谷歌统计等等.

HTTPS 设置

毕竟, 使用Chrome访问的时候, http 不安全的提示实在烦人得很. 阿里云个人是可以免费申请SSL证书的, 地址

申请之后, 每个账户可创建20个. 期限一年, 一年后重新申请即可.

image-20210620015841721

申请之后, 将证书上传到你的云服务器, 我在git项目中放了HTTPS版本的nginx配置文件, 拿来之后改下里面域名相关的值即可. 对了, 不要忘记打开你的云服务器443端口哦.

最后

如果你已经到了这里, 我相信你的小破站也已经搭建成功了吧, 最后, 不要忘记给你的服务器和域名加上自动续费哦.

最后的最后, 来看一眼我整了好久的小破站 https://hujingnb.com:

image-20210620133445332

订阅评论
提醒
guest
2 评论
最新
最旧
内联反馈
查看所有评论
wpdiscuz   wpDiscuz
2
0
希望看到您的想法，请发表评论。x