首先网站环境
Ubuntu,是个很好的个人选择，我的服务器都是Ubuntu，软件包非常新，特性也很好，使用人数也很多，解决起来也还方便，网站服务器系统就选它了。
Nginx,后起之秀，性能很好，支持高并发（虽然我的站只是个写字的地方）。另外模块也很多，使用的人数很多，反向代理等也很方便，非常稳定，配置起来非常方便，支持HTTP3/TLS1.3/0TTR/brotli等非常新的特性。虽说Caddy也很方便，但实验性的以为更多，以前我的博客就是架设在Caddy上，也很好。
Redis，是NoSQL即基于内存的数据库，做网站的缓存数据库很好，相当于给自己的机械硬盘系统装上了ssd，但是使用时一定要注意安全设置，不然很容易被抓去挖矿，密码一定要设置好。
PHP和Mysql，建网站的必须环境，无须多言。
我的网站是使用Docker的DNMP镜像搭建，解决了每次建站初期，最花时间的环境搭建工作，只需要使用docker pull下来镜像，然后docker-compose up -d就可以了。可以让你把更多的精力放在网站的内容创作上。镜像升级也很方便，重建更是快捷，甚至想体验一下最新的HTTP3，也不用自己重新编译Nginx，只需要找一个合适的Docker镜像，写到你的Docker-compose.yml里就行了。
博客平台选择
wordpress依旧是用的人最多，网上教程最丰富的，插件最方便的博客平台，虽然typecho和hexo也都是很优秀的平台，但选择最大众的平台软件，学习门槛也会低一些。(张大妈一开始就是用的wordpress)
主题选择
本身wordpress的主题就非常多，选择的余地很多，我之前使用的一直是simple主题，很好看，速度也很快，不过有一点不太方便就是，不能让浏览你网站的人，看到你写的别的文章。后来看到了typecho的优秀主题，handsome，非常想使用，差点就换平台了，但以前写的文章，不太方便转出来，就找到了wordpress同样优秀的主题smart_hankin，现在我是用的就是它。
相对simple更加的丰富一些，能实现很多我想实现的更多功能，我觉得也很不错。比如，三栏式显示，内置代码高亮（不一定是优点，还好可以自主选择）；外观美观舒适；添加js，CSS方便等。
当然也有不足之处，不过瑕不掩瑜，目前用着十分的舒服。
网站的配置
Nginx的配置
展开
我网站的Nginx，主要是开启301重定向，因为以前网站名称没有加www，现在加上了，为了方便搜索引擎定向网站，特意设置；开启http/2和tls；使用w3totalcache缓存；使用gzip和brotli压缩。
贴一下我的配置
server {
listen 443 default ssl http2; #开启ssl
listen 443 quic reuseport; #开启http3，这里要编译进cloudflare的quic地址是https://github.com/cloudflare/quiche
server_name colorcc.net www.colorcc.net;
http2_push_preload on;
if ($host = 'colorcc.net')
{
rewrite ^/(.*) https://www.colorcc.net/$1 permanent;
} #这里就是重定向，将搜索引擎收录的colorcc.net转向到www.colorcc
root /www/localhost;
index index.php index.html index.htm;
ssl_early_data on;
ssl_ciphers 'ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384';#这里指明支持的加密方式，降低怪物攻击风险
ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3; #开启tlsv1.3需要在编译时，选定配置，同时注意，不要开启tlsv1.0,有野兽攻击和心血漏洞的风险
ssl_session_cache shared:SSL:10m;
ssl_stapling on;
tcp_nodelay on;
ssl_stapling_verify on;
resolver 8.8.4.4 8.8.8.8 valid=300s;
resolver_timeout 10s;
ssl_prefer_server_ciphers on;#这里让浏览器更多的选择服务器端的首选算法ECDHE-ECDSA-AES128-GCM-SHA256
ssl_dhparam /ssl/dhparam.pem;#使用openssl生成一个永不重用的密钥，并选用它，来增加前向安全性。以使通信防御中间人攻击。生成命令是openssl dhparam -out dhparam.pem 4096，这里的4096可以换成更大的数字，但计算时间会更长，我的i5 8400计算8192位的时间是40分钟左右，4096是5分钟左右。
add_header alt-svc 'h3-27=":443"; ma=86400';这里是使用http3
add_header X-Early-Data $tls1_3_early_data;
add_header Strict-Transport-Security max-age=63072000;
add_header X-Frame-Options DENY;
add_header X-Content-Type-Options nosniff;
access_log /dev/null;
brotli_static on;#开启brotli压缩，可以在支持brotli的浏览器上，将压缩内容相比gzip在压缩20%以上体积，例如我的网站上hightlight.min.js实际大小为299kb，gzip可以压缩到170kb，开启brotli后，压缩到了102kb，体积从57%提升到了34%！
brotli on;
brotli_types text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/richtext text/plain text/xsd text/xsl text/xml image/bmp application/java application/msword application/vnd.ms-fontobject application/x-msdownload image/x-icon application/json application/vnd.ms-access video/webm application/vnd.ms-project application/x-font-otf application/vnd.ms-opentype application/vnd.oasis.opendocument.database application/vnd.oasis.opendocument.chart application/vnd.oasis.opendocument.formula application/vnd.oasis.opendocument.graphics application/vnd.oasis.opendocument.spreadsheet application/vnd.oasis.opendocument.text audio/ogg application/pdf application/vnd.ms-powerpoint image/svg+xml application/x-shockwave-flash image/tiff application/x-font-ttf audio/wav application/vnd.ms-write application/font-woff application/font-woff2 application/vnd.ms-excel;#设置brotli压缩的格式
brotli_comp_level 4;#brotli压缩等级
error_log /var/log/nginx/nginx.localhost.error.log warn;
ssl_certificate /ssl/fullchain.pem;
ssl_certificate_key /ssl/privkey.pem;
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
set $cache_uri $request_uri;#w3配置
if ($request_method = POST) {
set $cache_uri 'null cache';
}
if ($query_string != "") {
set $cache_uri 'null cache';
}
if ($request_uri ~* "(/wp-admin/|/xmlrpc.php|/wp-(app|cron|login|register|mail).php|wp-.*.php|/feed/|index.php|wp-comments-popup.php|wp-links-opml.php|wp-locations.php|sitemap(_index)?.xml|[a-z0-9_-]+-sitemap([0-9]+)?.xml)") {
set $cache_uri 'null cache';
}
if ($http_cookie ~* "comment_author|wordpress_[a-f0-9]+|wp-postpass|wordpress_logged_in") {
set $cache_uri 'null cache';
}
location / {
try_files /wp-content/w3tc/pgcache/$cache_uri/_index.html $uri $uri/ /index.php?$args ;
if (-f $request_filename/index.html){
rewrite (.*) $1/index.html break;
}
if (-f $request_filename/index.php){
rewrite (.*) $1/index.php;
}
if (!-f $request_filename){
rewrite (.*) /index.php;
}
}
location ~ \.php$ {
fastcgi_pass php:9000;
include fastcgi-php.conf;
include fastcgi_params;
}
gzip_http_version 1.1;#让支持gzip的浏览器开始gzip
gzip_buffers 4 16k;#片段大小和占用内存倍数
gzip_comp_level 6;#较好的压缩等级选项
gzip_vary on;
gzip_min_length 1k;
gzip_static on;
gzip_disable msie6;#不让ie6使用gzip
gzip on;
gzip_types text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/richtext text/plain text/xsd text/xsl text/xml image/bmp application/java application/msword application/vnd.ms-fontobject application/x-msdownload image/x-icon application/json application/vnd.ms-access video/webm application/vnd.ms-project application/x-font-otf application/vnd.ms-opentype application/vnd.oasis.opendocument.database application/vnd.oasis.opendocument.chart application/vnd.oasis.opendocument.formula application/vnd.oasis.opendocument.graphics application/vnd.oasis.opendocument.spreadsheet application/vnd.oasis.opendocument.text audio/ogg application/pdf application/vnd.ms-powerpoint image/svg+xml application/x-shockwave-flash image/tiff application/x-font-ttf audio/wav application/vnd.ms-write application/font-woff application/font-woff2 application/vnd.ms-excel;#设置gzip的压缩格式，我的设置可以比较全面的压缩常见格式
location ~ \.(css|htc|less|js|js2|js3|js4)$ {
expires 31536000s;
if_modified_since exact;
try_files $uri $uri/ /index.php?$args;
}
location ~ \.(html|htm|rtf|rtx|txt|xsd|xsl|xml)$ {
if_modified_since exact;
try_files $uri $uri/ /index.php?$args;
}
location ~ \.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|webp|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|webm|mpp|_otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|_ttf|wav|wma|wri|xla|xls|xlsx|xlt|xlw|zip)$ {
expires 31536000s;
if_modified_since exact;
try_files $uri $uri/ /index.php?$args;
}
add_header Referrer-Policy "no-referrer-when-downgrade";
}
map $ssl_early_data $tls1_3_early_data {
"~." $ssl_early_data;
default "";#tlsV3 0TTR设置
可以使用ssl labs来测试你的网站ssl安全性，我的是A+，这里提供一个生成安全配置网站，非常方便的就能使用。关于开启tlsv1.3 http/3等，可以直接使用现成的docker镜像，ranadeeppolavarapu/nginx-http3，具体的查看dockerfile。说一下docker-compose.yml使用这个镜像的方法
version: "3"
services:
nginx:
image: ranadeeppolavarapu/nginx-http3:latest
container_name: nginx
.......
这样就能在docker-compose up -d的时候，直接pull该镜像了，也可以下载他的Dockerfile回来自己建立，但这样慢。
Redis安全问题
Redis，默认没有密码，如果不设置密码和防火墙，那非常容易被扫描到，然后抓去挖矿，redis的安全设置也很简单
redis的配置
bind 172.16.0.0/16 #仅允许我的docker容器来访问
protected-mode yes #需配置bind ip或者设置访问密码
requirepass saddwnldj22ejoaN#一个复杂的密码
------------
防火墙的配置
sudo ufw default deny
sudo ufw allow from 172.16.0.3 to any port 6379 #比如我这里只允许我的php容器来访问redis的6379，外网的ip一律阻绝
sudo ufw reload
ufw status
wordpress w3totalcache的设置
网站的一些效果
文章新窗口打开和外联跳转
展开
文章新窗口打开主要是因为，我现在使用的这个主题，是新窗口无刷新的pjax，效果和速度不错，但加载js就很难受了了，还是新窗口打开比较好，能够加载js。新窗口打开使用的是[WP External Links](https://wordpress.org/support/plugin/wp-external-links “WP External Links”)，可以设之站内链接新窗口打开，然后通过data-wpel-link=”ignore” 标签，来排除站内链接。
外链跳转是使用的网上找的合适的代码和效果
/* 文章go外链跳转,添加到functions.php*/
add_filter('the_content','go_url',999);
function go_url($content){
preg_match_all('/rel="nofollow" target="_blank" href="https://www.colorcc.net/go?url=KC4qPyk="/',$content,$matches);
if($matches){
foreach($matches[1] as $val){
if( strpos($val,home_url())===false&&strpos($val,"javascript:void(0)")===false )
$content=str_replace("href=\"$val\"", "rel=\"nofollow\" target=\"_blank\" href=\"" . get_bloginfo('wpurl'). "/go?url=" .base64_encode($val). "\"",$content);
}
}
return $content;
}
<!--在网站的根目录创建文件夹"go",在里边建立index.php 具体的跳出模板可以从网上找到更优秀的-->
<?php
$url = $_GET['url'];
$url = base64_decode($url);
?>
<html>
<head>
<meta charset=utf-8 />
<meta name="robots" content="nofollow">
<meta http-equiv="refresh" content="0.1;url=<?php echo $url; ?>">
<title>正在为您跳转……</title>
<style>
body{background:#000}.loading{-webkit-animation:fadein 2s;-moz-animation:fadein 2s;-o-animation:fadein 2s;animation:fadein 2s}@-moz-keyframes fadein{from{opacity:0}to{opacity:1}}@-webkit-keyframes fadein{from{opacity:0}to{opacity:1}}@-o-keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadein{from{opacity:0}to{opacity:1}}.spinner-wrapper{position:absolute;top:0;left:0;z-index:300;height:100%;min-width:100%;min-height:100%;background:rgba(255,255,255,0.93)}.spinner-text{position:absolute;top:41.5%;left:47%;margin:16px 0 0 35px;color:#BBB;letter-spacing:1px;font-weight:700;font-size:9px;font-family:Arial}.spinner{position:absolute;top:40%;left:45%;display:block;margin:0;width:1px;height:1px;border:25px solid rgba(100,100,100,0.2);-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;border-left-color:transparent;border-right-color:transparent;-webkit-animation:spin 1.5s infinite;-moz-animation:spin 1.5s infinite;animation:spin 1.5s infinite}@-webkit-keyframes spin{0%,100%{-webkit-transform:rotate(0deg) scale(1)}50%{-webkit-transform:rotate(720deg) scale(0.6)}}@-moz-keyframes spin{0%,100%{-moz-transform:rotate(0deg) scale(1)}50%{-moz-transform:rotate(720deg) scale(0.6)}}@-o-keyframes spin{0%,100%{-o-transform:rotate(0deg) scale(1)}50%{-o-transform:rotate(720deg) scale(0.6)}}@keyframes spin{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(720deg) scale(0.6)}}
</style>
</head>
<body>
<div class="loading">
<div class="spinner-wrapper">
<span class="spinner-text">加载中...</span>
<span class="spinner"></span>
</div
></div>
</body>
</html>
代码高亮
使用smaryt_hankin主题之前，代码高亮使用的插件是prism.js。可以实现的复制按钮，下载代码，代码行号，等支持206种语言，安装方法是将如下代码，写入到主题的functions.php里
// 代码高亮 Prism.js
function add_prism() {
wp_register_style(
'prismCSS',
get_stylesheet_directory_uri() . '/prism/prism-lite.css' //自定义路径
);
wp_register_script(
'prismJS',
get_stylesheet_directory_uri() . '/prism/prism-lite.js' //自定义路径
);
wp_enqueue_style('prismCSS');
wp_enqueue_script('prismJS');
}
add_action('wp_enqueue_scripts', 'add_prism');
也可使使用Markdowneditor插件，自带prism.js代码高亮，我使用的是主题自带的hightlight.js,支持185种语言，效果也还可以。
hightlight粘贴板
展开
借鉴一下理想乡的方法，因为我不想要行号功能，所以这里有删减
- 引入highlight
- 引入clipboard
- 创建highlight-worker.js
- 创建wp-heightlight.js
//footer里引入js
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/assets/js/plugins/highlight/clipboard.min.js?version=<?= time()?>">#这里的地址改成自己的
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/assets/js/plugins/highlight/highlight.min.js?version=<?= time()?>"></script>#这里的地址改成自己的
<script>
window.theme_url = "<?php echo get_template_directory_uri(); ?>";
</script>
<script src="<?php echo get_template_directory_uri(); ?>/js/wp-heightlight.js" type="text/javascript"></script>
//highlight-worker.js和wp-heightlight.js放在主题新建文件夹js目录下
//highlight-worker.js内容
importScripts('地址/highlight.min.js');onmessage=function(event){var data=JSON.parse(event.data);try{var result=self.hljs.highlight(data.lang,data.code);}catch(e){var result=self.hljs.highlightAuto(data.code);}
postMessage(JSON.stringify({result:{value:result.value,language:result.language,},index:data.index}));};
//wp-heightlight.js内容
(function($) {
function initHighlight() {
function getLang(codeCls) {
var result = codeCls.match(/language-(\w+)/);
var lang = "plaintext";
if (result && result.length) {
lang = result[1];
}
if (lang === "text") {
lang = "plaintext";
}
return lang;
}
function createBar(i) {
var codeCls = $('pre:eq(' + i + ')')[0].children[0].className;
$('pre:eq(' + i + ') code').addClass('hljs').attr('data-rel', getLang(codeCls).toUpperCase()).attr({
id: "highlight-code-" + i
}).after('<a class="copy-code" data-clipboard-target="#highlight-code-' + i + '" ><span class="icon-clippy"></span></a>');
}
function highlightWorker() {
var codeBlocks = document.querySelectorAll('pre code');
if (window.theme_url) {
var worker = new Worker(window.theme_url + '/js/highlight-worker.js');
} else {
return false;
}
codeBlocks.forEach(function(block, index) {
worker.postMessage(JSON.stringify({
code: block.textContent,
lang: getLang(block.className),
index,
total: codeBlocks.length,
}));
})
}
function highlightNormal() {
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
for (var i = 0, len = $('pre').length; i < len; i++) {
createBar(i);
}
}
if (typeof(Worker) === undefined) {
highlightWorker();
} else {
highlightNormal();
}
new ClipboardJS('.copy-code');
}
$(document).ready(function() {
initHighlight();
});
})(jQuery);
//合适的地方加入heightlight.css，需要加入.copy-code
.copy-code {
text-decoration:none;
color:#fff;
position:absolute;
float:right;
right:10px;
top:0;
padding-top:4px;
padding-right:2px;
z-index:2;
font-size:15px;
cursor:pointer;
}
文章折叠
展开
最开始使用的是网上找的插件代码，写到主题的header.php、functions.php和style.css里。
//展开收缩功能,加到functions.php
function xcollapse($atts, $content = null){
extract(shortcode_atts(array("title"=>""),$atts));
return '<div style="margin: 0.5em 0;">
<div class="xControl">
<span class="xTitle">'.$title.'</span>
<a style="text-decoration: none;font-family: 微软雅黑;color: #ffffff;"href="javascript:void(0)" class="collapseButton xButton" data-wpel-link=ignore>展开/折叠</a>
<div style="clear: both;"></div>
</div>
<div class="xContent" style="display: none;">'.$content.'</div>
</div>';
}
add_shortcode('collapse', 'xcollapse');
//加到header.php
<script type="text/javascript">
jQuery(document).ready(function(jQuery) {
jQuery('.collapseButton').click(function() {
jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
});
});
</script>
//加到style.css
.xButton{
-webkit-border-radius: 8;
-moz-border-radius: 8;
border-radius: 8px;
text-shadow: 0px 1px 0px #3d768a;
-webkit-box-shadow: 0px 10px 14px -7px #276873;
-moz-box-shadow: 0px 10px 14px -7px #276873;
box-shadow: 0px 10px 14px -7px #276873;
font-family: Arial;
color: #ffffff;
font-size: 16px;
background: #44aec7;
padding: 12px 30px 12px 30px;
border: solid #1f628d 1px;
text-decoration: none;
}
.xButton:hover {
color: #ffffff;
background: #408c99;
text-decoration: none;
}
.xControl {
text-align: center;
}
但也有限制，动画不方便调节，不能同时打开多个折叠按钮，还是找找wordpress里有什么好的插件吧。
千辛万苦终于找到一款，也就是我的网站正在用的折叠插件，Show-Hide/Collapse-Expand，但原始的按钮太丑陋了，而且只能靠左显示，现在来优化一下它吧：
#添加到style.css，实现居中。
.bg-margin-for-link {
text-align:center;
}
#修改/wp-content/plugins/show-hidecollapse-expand/bg_show_hide.php的212及以后行
#将
href='#'
#换成
href='javascript:void(0)' data-wpel-link='ignore'
在文章中插入的按钮样式改为
/*将【】换为[]*/
【bg_collapse view="link" color="#4a4949" expand_text="展开" collapse_text="折叠" inline_css=" -webkit-border-radius: 8; -moz-border-radius: 8; border-radius: 8px; text-shadow: 0px 1px 0px #3d768a; -webkit-box-shadow: 0px 10px 14px -7px #276873; -moz-box-shadow: 0px 10px 14px -7px #276873; box-shadow: 0px 10px 14px -7px #276873; font-family: Arial; color: #ffffff; font-size: 19px; background: #44aec7; padding: 12px 30px 12px 30px; text-decoration: none;" 】<div style="text-align:left">内容<div>【bg_collapse】
说下在pre标签里插入html代码的方法
只需要将代码里的<>换成<>
#更多的可以查看html转义方法，网上其他的教程例如插入js或者修改functions.php不适用于所有主题
设置全局字体
先说一下安全字体，现在上网的设备很多，每个设备默认的字体都不一样，如果网页不声明字体的话，网页的效果也会大打折扣，但又因为设备默认字体不一样，如果声明的字体不兼容你的设备的话，观感也会很大影响，所以前端声明的字体应该包含在大部分设备所共有的字体中。目前这些安全字体也就是大部分设备的都有的字体：
常用的英文字体:
“Arial”、“Verdana”（小字号很舒服）、“Georgia”、“Times New Roman”、“Tahoma”(适合做标题)、“Helvetica”(MAC专用)
常用的中文字体:
“SimSun,宋体”、“Microsoft YaHei,微软雅黑”、“黑体”、
wordpress全局调用字体:
/*添加到style.css*/
body,td,th {
font-family:Arial,'Times New Roman','Microsoft YaHei',SimHei,sans-serif;
}
/*font-family的原则，假如客户终端不认识前面的字体，就自动切换到第二种字体,都不识别就切换到默认的无衬线字体例如黑体等
#这里要先设置英文字体，再设置中文字体，因为中文字体中虽然也可以显示英文，但并没专门的英文字体好看，另外专门的英文字体不能识别中文字体，所以，设置英文字体在前就能实现英文字体和中文字体都兼具优化的效果*/
虽然也可以自己找到喜欢的字体，保存到服务器上，让网页调用，但中文包往往很大，而且要存成三个格式，以适用与所有设备，网页动辄十几m,不是太值。
长代码换行
有的代码高亮不支持换行，来回拖动代码页又不好看，在Style.css加句话，让它自动换行（可能和行号冲突，自行选择）
pre {
white-space: pre-wrap;
word-wrap: break-word;
white-space: -moz-pre-wrap;
white-space: -o-pre-wrap;
word-break: break-all;
}
