那么,秉着分享为乐的互联网精神,我会将我搭建这个博客的具体步骤,尽可能详细地记录在下面。这是一项浩大的工程,会涉及到许多未知的领域。因此我会以我一开始搭建博客的方法、思路和行为作为基准,尽可能简化那些步骤。即:不去考虑太多原理,只要知道怎么操作就行了。

基本概念

服务器

1. 购买服务器

服务器的平台太多了,种类繁多复杂。国外就不说了,VULTR、搬瓦工、Linode,比比皆是。而国内比较知名的有腾讯云、阿里云、华为云等。下面以国外的VULTR,国内的腾讯云和阿里云为例,介绍一下大概的购买流程。

要注意在注册完成后,记住分配给你的IP地址密钥

腾讯云

如果你的年龄在18周岁以上,是在校大学生,且愿意实名制并备案。那么你可以购买腾讯云的学生机。

学生机购买入口:https://cloud.tencent.com/act/campus

按照官方的步骤创建账号、实名制、购买10元学生套餐即可。只要注意在选择服务器时选择Ubuntu Server

阿里云

国内的服务器都需要实名备案,阿里云默认24岁以下自动获得学生身份,且 CPU性能不限。

学生机购买入口:https://promotion.aliyun.com/ntms/act/campus2018.html

按照官方的步骤创建账号、实名制、完成学生认证,不介意的话可以通过我的 邀请链接 注册账号。

需要注意服务器选择轻量应用服务器,带宽比较高。预装环境选择系统镜像Ubuntu 18.04 64位或是最新的版本。地区随意,靠近自己为佳。

VULTR

首先是注册账户。登录 https://www.vultr.com/ 完成注册,在主页就有账户注册入口。也可以通过我的邀请链接注册:https://www.vultr.com/?ref=7295440 。两者注册的账户都一样,只是用我的邀请链接注册后,我可以在你首次充值时获得奖赏。需要注意的是,在账户注册时尽量填写真实的信息,可以减少不必要的麻烦。

第二步,为账户充值。点击左侧Billing,选择支付方式充值即可。Vultr支持支付宝和微信支付,但需要注意的是这两种支付方式的充值限制在最低支付十美元,差不多是70人民币。

接下来是创建服务器。在VULTR的任意界面右侧都有一个+号——Deploy new serve,点击后进入购买服务器的界面。

Choose Server选择Cloud ComputeServer Location可以选择TokyoSingaporeSeattleServer Type选择Ubuntu 18.04 x64Server Size选择25 GB SSD, $5/mo,然后直接点击Deploy Now创建服务器。

由于VULTR按使用时间计费,除非摧毁服务器否则计费是不会停的。所以没有闲钱的话可别把服务器闲置了。

2. 连接服务器

使用SSH连接工具连接服务器。这里推荐的是 Xshell。下载、安装后,进入软件,点击左上角文件新建一个会话

如上图,在主机中填入购买服务器得到的IP地址,端口号默认是22,不用管他。然后点击连接。弹出来的东西就直接确认,用户名一般是root,密码是主机商给的,也填进去。若给的是密钥,就从主机商上下载下来,然后导入Xshell,就可以选择密钥登陆。

3. 安装LNMP

因为我不喜欢宝塔,但又不会自己挨个安装 Nginx、MySQL、PHP,所以这里推荐使用的是 LNMP一键包。详细的步骤可以参考官方的安装方法

安装LNMP有很多基本要求,这里以服务器配置为2G内存、Ubuntu18为前提,安装最新版LNMP。

  • 安装 screen,它的作用是如果网络掉线,你可以重新连接SSH,再执行screen -r lnmp,就会看到你的 lnmp 安装进程。保证安装过程的稳定性。
apt-get install screen
  • 安装完毕,执行
screen -S lnmp
  • 接着开始安装 LNMP,这里的命令是安装1.7版本,如果有更新,请安装最新版本。
wget http://soft.vpser.net/lnmp/lnmp1.7.tar.gz -cO lnmp1.7.tar.gz && tar zxf lnmp1.7.tar.gz && cd lnmp1.7 && ./install.sh lnmp 

MySQL 版本 为脚本默认,PHP 版本需要在官网上查询,选择最新版。Nginx 版本默认,数据库密码建议随机生成一个记不住的。

安装LNMP时间很长,你可以在这个时候去注册域名。

4. 添加域名到服务器

参考LNMP官网: LNMP添加、删除虚拟主机及伪静态使用教程

进入/usr/local/nginx/conf/vhost这个目录(可以复制粘贴到地址栏里,敲回车键直接进入),新建一个域名配置文件,你也可以在PC本地创建这个文件,再上传到服务器里。这里以我的域名为例,如www.himiku.com.conf

用编辑器(推荐使用 Visual Studio Code)打开此文件,进行下面的操作。

添加域名配置

一开始建站,肯定是什么都不懂的。关于SSL证书可以自行搜索其作用,总之先把博客与域名链接起来再说。

把下面的代码复制粘贴进去,修改第5行域名配置、第7行博客程序所在路径配置、以及第35行内的域名。

server
    {
        listen 80;
        #listen [::]:80;
        server_name www.himiku.com himiku.com;
        index index.html index.htm index.php default.html default.htm default.php;
        root  /home/wwwroot/blog;

        #error_page   404   /404.html;

        # Deny access to PHP files in specific directory
        #location ~ /(wp-content|uploads|wp-includes|images)/.*\.php$ { deny all; }
        include rewrite/typecho.conf;
        include enable-php-pathinfo.conf;

        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        {
            expires      30d;
        }

        location ~ .*\.(js|css)?$
        {
            expires      12h;
        }

        location ~ /.well-known {
            allow all;
        }

        location ~ /\.
        {
            deny all;
        }

        access_log  /home/wwwlogs/www.himiku.com.log;
    }

其中,第13行include rewrite/typecho.conf;是伪静态的内容,加上之后可以去掉Typecho地址栏中的index.php

然后进入ssh控制台,输入以下命令重启 Nginx

lnmp nginx restart

申请 SSL 证书

为博客加上https,需要添加SSL证书。这玩意概念具体自查,直接上教程。

1. 部署证书签发服务

有关更详细的acme.sh的使用方法需要参考官方教程

安装acme.sh

curl  https://get.acme.sh | sh 

使用dnsapi的方式验明域名所有权,同时可以极大地方便续签的操作,这里以 Dnspod (腾讯云)为例,有关dnsapi的说明需要参考官方教程,基本上都差不多。

export DP_Id="123456"\
export DP_Key="sADDsdasdgdsf"

签发泛域名证书,以本站域名为例,请修改成自己的域名。

acme.sh --issue --dns dns_dp -d '*.himiku.com' -d himiku.com

签发的证书一般是默认生成在root/.acme.sh/下,为安全起见,不要直接使用这里的证书,而是复制到/usr/local/nginx/conf/ssl目录,只是需要手动新建ssl和域名文件夹,

acme.sh  --installcert  -d  '*.himiku.com'   --key-file   /usr/local/nginx/conf/ssl/himiku.com/himiku.com.key --fullchain-file /usr/local/nginx/conf/ssl/himiku.com/fullchain.cer --reloadcmd  "lnmp nginx restart"

如要申请ECC证书,只要在末尾添加 --keylength ec-256

acme.sh --issue --dns dns_dp -d '*.himiku.com' -d himiku.com --keylength ec-256

复制证书只要加个--ecc,但是域名部分也要做相应的变更。如果害怕出错,请直接照着我的来。

acme.sh  --installcert  -d  '*.himiku.com' --ecc   --key-file   /usr/local/nginx/conf/ssl/himiku.com/himiku.com_ecc.key --fullchain-file /usr/local/nginx/conf/ssl/himiku.com/fullchain_ecc.cer --reloadcmd  "lnmp nginx restart"

证书在 60 天以后会自动更新, 无需任何操作. 今后有可能会缩短这个时间, 不过都是自动的。但还是可以用这个命令检查

acme.sh --renew-all

同时建议开启自动更新

acme.sh  --upgrade  --auto-upgrade

之后,还需要生成一个dhparam.pem文件,增加安全性。

openssl dhparam -dsaparam -out /usr/local/nginx/conf/ssl/dhparam.pem 4096
2. Nginx 配置文件修改

在证书签发成功后,需要修改配置文件,强制使用https。直接替换原来没有使用证书的文件,填入以下内容。同样修改域名,有些地方需要解释下。

  • 第5行的作用是,访问http://himiku.comhttp://www.himiku.com时,会一律跳转到https://himiku.com
  • 第11-13行的作用是,如果访问https://www.himiku.com时,会强制跳转到https://himiku.com
  • 第17-19行是证书的部分,请根据自己的证书位置及名称修改。
  • 第26行的作用是启用HSTS,具体作用见:小站已加入HSTS Preload List。若不需要可以删除。
server {
    listen 80;
    listen [::]:80;
    server_name himiku.com www.himiku.com;
    return 301 https://himiku.com$request_uri;
}
server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name himiku.com www.himiku.com;
    if ($host = 'www.himiku.com') {
    return 301 https://himiku.com$request_uri;
    }
    index index.html index.htm index.php default.html default.htm default.php;
    root /home/wwwroot/blog;
    
    ssl_certificate /usr/local/nginx/conf/ssl/himiku.com/fullchain.cer;
    ssl_certificate_key /usr/local/nginx/conf/ssl/himiku.com/himiku.com.key;

    ssl_session_timeout 5m;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
    ssl_ciphers "TLS13-AES-256-GCM-SHA384:TLS13-CHACHA20-POLY1305-SHA256:TLS13-AES-128-GCM-SHA256:TLS13-AES-128-CCM-8-SHA256:TLS13-AES-128-CCM-SHA256:EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5";
    ssl_session_cache builtin:1000 shared:SSL:10m;
    ssl_dhparam /usr/local/nginx/conf/ssl/dhparam.pem;
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
    include rewrite/typecho.conf;
    # Deny access to PHP files in specific directory
    #location ~ /(wp-content|uploads|wp-includes|images)/.*\.php$ { deny all; }
    include enable-php-pathinfo.conf;

    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
        expires 30d;
    }

    location ~ .*\.(js|css)?$ {
        expires 12h;
    }

    location ~ /.well-known {
        allow all;
    }

    location ~ /\. {
        deny all;
    }
    access_log /home/wwwlogs/himiku.com.log;
}

注意对域名配置文件修改后,可以测试是否有错误

nginx -t

无误后,再重启 Nginx 服务

lnmp nginx restart

关于数据库

因为 LNMP 的官方添加虚拟主机的教程里有一步是添加同名数据库的,但如果直接照我的方法来的话,相当于直接跳过了,因此需要手动创建数据库。

如果你刚安装完 LNMP,访问http://你的ip/phpmyadmin/,进入 phpMyAdmin 的登陆页面,填入用户名root,密码是你安装 LNMP 时设置的。建议重命名 phpMyAdmin 这个文件夹,让别人猜不到是啥。

然后点击左侧新建,左边填写数据库名称,如blog,右边选择utf8mb4_general_ci,点击创建即可。

关于博客安装完毕的数据库配置,我会在其他文章中说明。这里先咕了。

域名

1. 注册域名

注册域名的地方,选择也有很多。不过只是搭建博客的话,个人建议在国内注册,因为比较便宜。若是想写一些不被法律允许的东西,那么还是选择国外的域名商比较妥当。具体自查。下面以腾讯云为例。

直奔 https://dnspod.cloud.tencent.com/ ,注册域名就完事了。

2. 设置域名解析

服务器有了,域名也有了,接下来就是设置域名解析。仍以腾讯云为例。

直奔 https://console.cloud.tencent.com/cns ,找到你在腾讯云注册好的域名,点击添加域名解析

以我的himiku.com为例,主机记录填www,记录值填上面得到的IP地址。然后保存即可。

这样你的博客链接就是 www.himiku.com 。如果想让博客链接显示为 himiku.com ,就填入@。或者把@变成你的个人主页,用 blog.himiku.com 也是个不错的选择。

安装博客程序

1. 安装Typecho

如果你已经安装好LNMP并设置完解析,并且已经把域名添加到服务器上了,那么你就可以开始安装博客了。这里要用到XftpXftp跟上面的Xshell是一家公司的。自己下载去。登陆步骤也和Xshell的一样,翻上去再看一遍。

登进去后,一般默认是在/root目录,咱退回到根路径,一般长这样。

我这截图不完全,不管他。进入/home/wwwroot目录,这里头放的是你在上面设置LNMP里建好的网站根目录。

随后下载博客程序。到 Typecho 官网,直接下载开发版吧。正式版其实有很多问题,开发版比较好一些。然后解压缩。得到的是一个build文件夹,里头是这么些个东西。

把这些东西直接拖进网站根目录里头,就可以啦!不过最好改个名字,比如blog,这样好看也好记,就像这样。

直接拖进来的文件夹有一个弊端,它的所有者是root,Xftp会显示,好好找找就能看到。这里我们需要一些命令操作一下,把它们的所有者改为www。请在 Xshell 里输入以下命令:

chown www:www -R /home/wwwroot/blog
chmod 755 -R /home/wwwroot/blog

-R后面跟着你的博客所在路径。如果博客程序目录不叫blog,自行更改便是。

后续添加插件也是如此,重复上述操作,对着博客目录设置下就行。

2. 设置Typecho

接下来就可以访问博客进行设置啦!

初始设置

如果你一切工作都已准备就绪,到了这个界面,那么就可以开始 Typecho 的初始设置部分了。

按照图中显示的那样,数据库适配器、数据库地址和数据库端口都保持默认,用户名是root数据库名是你自己在添加虚拟主机这一步里新建的那个数据库,比如blog数据库编码修改为utf8mb4,其他保持默认。

如果按下确定之后,却弹出提示说:

这是博客程序权限不够的原因。我们可以按照说明新建config.inc.php文件,但是还需要在 ssh 里操作下。如果你的博客所在路径是/home/wwwroot/blog,那么就:

chown www:www -R /home/wwwroot/blog

这样,博客的初始设置部分就结束了。

其他设置

站点名称、链接设置

有关站点名称和链接的设置,在 设置→基本 中进行修改。如本站站点名称为「初之音」,描述为「聆听心中最初的声音」,站点描述为「初之音,blog」。这些设置除了在首页显示出来,主要是供搜索引擎索取的。

自定义文章、独立页面、分类路径

设置→永久链接 中进行自定义文章、独立页面、分类路径的设置。本站使用的是 wordpress风格 /archives/{slug}.html 的链接设置。这一风格的链接有一好处,slug 是可以自行修改的,链接不是单纯的数字显示。默认风格的 cid 是不可更改的。不过各有所需,自己斟酌。

其他独立页面、分类路径均为默认。

需要注意,一旦确定链接格式,不要轻易修改,除非你不在意已被搜索引擎抓取并展示的网页。

网站 Logo

网站的 Logo 是一个 favicon.ico 文件,准备好一张方形或圆形的图片,搜索「favicon制作」,把转换结果重命名为favicon,将这个文件放进博客根目录下。

刷新博客,按键ctrl+shift+R,刷新之后就会在地址栏显示出来了。

个人头像、昵称

个人资料的设置在 控制台→个人设置 中,重置密码也是在这里操作。

伪静态

先前在 Nginx 配置文件中加入了伪静态的配置。Typecho 的伪静态主要作用是去掉链接中的index.php,我们需要在 设置→永久链接 中启用这一功能。但是启用之后会提示检测重写功能失败,如果你确定有添加伪静态,就直接勾选启用不要管这个报错。

3. 关于 VOID 主题的设置

如果你参考了本站,也使用了 VOID 主题,那么有些设置不看文档肯定不会设置。这一部分是建立在你偷懒的基础上额外添加的。

归档

管理→独立页面 中新建一页,命名为「归档」,地址栏中修改为 archives,右侧自定义模板选择「Archives」。

友链

管理→独立页面 中新建一页,命名为「友链」,地址栏中修改为 links。友链的格式如下:

因为使用VOID主题的话,这些代码会被直接解析,请去掉下列代码中的 `#`符号。
[#links]

[博客名称](博客链接)+(头像链接)

[#/links]

超高级设置

在主题的设置中有个「超高级设置」。在主题文件中找到 advanceSetting.sample.json 这个文件,里面是超高级设置的说明。关于头图高度、字体等设置都在里面,十分详细。

这里举个例子,设置桌面端头图高度占比100,移动端头图高度占比30,导航栏模式固定,在图片下方显示图题。

{
    "desktopBannerHeight" : 100,
    "mobileBannerHeight" : 30,
    "headerMode": 1,
    "parseFigcaption": true
}

4. 安装 Typecho 插件

以博客目录为blog为前提,插件存放在/home/wwwroot/blog/usr/plugins,把下载的插件都拖到这里头,授予www:www权限、755权限。注意压缩包要解压了再上传。

chown www:www -R /home/wwwroot/blog/usr/plugins
chmod 755 -R /home/wwwroot/blog/usr/plugins

推荐必备的插件有:

  1. Sitemap:供搜索引擎抓取
  2. ExSearch:VOID主题必备的搜索插件
  3. Mailer:评论邮件提醒插件

其余的插件可以参考本站使用的插件列表

Typecho 主题推荐

博客图片问题

可以直接在博客中上传,但后期维护麻烦,因此建议使用公共图床或是自建图床,具体自查。

关于自建图床可以参考:使用云存储搭建私人图库

Markdown 语法问题

可以参考:常用Markdown语法

差不多就是这样。咱们有问题留言。