秉着分享为乐的互联网精神,我会将我搭建这个博客的具体步骤,尽可能详细地记录在下面。这是一项浩大的工程,会涉及到许多未知的领域,我会以我一开始搭建博客的方法、思路和行为作为基准,尽可能简化那些步骤。

即:不去考虑太多原理,只要知道怎么操作就行了。

基本概念

访问一个网站,实际上是浏览器通过域名访问链接到该域名的IP地址,IP地址绑定与服务器相绑定;服务器需要配备网络环境,由网站环境中的程序,查找系统中该域名所绑定的网站程序,比如 Typecho;最后,由网站程序将内容返回给访客。

域名和服务器可以直接在云服务器厂商购买,接着在服务器上部署网络环境,后续安装博客程序就十分简单了。

购买服务器

服务器的平台太多了,Amazon、腾讯云、阿里云、Google、VULTR、搬瓦工、Linode,种类繁多复杂。要怎么买当然是自己的选择,但是只是想玩一玩或是写写日志之类的,可以优先考虑国内的服务器,只是有一点需要注意,购买并使用位于国内的服务器,域名需要备案。不喜欢备案可以购买位于国外的服务器。

下面介绍一下腾讯云阿里云大概的购买流程。注意注册完成后,记住分配给你的IP地址密钥或是密码

腾讯云


如果你的年龄在18周岁以上,是在校大学生,且愿意实名制并备案,那么可以购买腾讯云的学生机。学生机购买入口:https://cloud.tencent.com/act/campus

腾讯校园云服务器
腾讯校园云服务器

个人推荐购买「轻量应用服务器 1核2G」,虽然可选地区只有上海、北京,但是上传带宽有「5M」。系统先选择「CentOS」,购买完成后可以更改。

选择轻量应用服务器
选择轻量应用服务器

打开轻量应用服务器控制台,点进去。

然后找到「应用信息」,点击「重置应用」。

选择「Ubuntu 20.04 LTS」即可。

注意勾选已读
注意勾选已读

如果域名还没有备案或是不想备案,可以考虑购买境外地域的服务器。购买地址:https://buy.cloud.tencent.com/lighthouse

轻量应用服务器
轻量应用服务器

一开始1核1G的配置就够了,地域可选中国香港或是新加坡,镜像选则Ubuntu 20.04 LTS,最低配置一个月24元,带宽30M管够。

不介意的话可以使用我的推广链接购买。

阿里云


阿里云学生机,原来叫「云翼计划」,现在更名「开发者成长计划」。

购买入口:https://developer.aliyun.com/plan/grow-up

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

购买时选择「轻量应用服务器」,带宽比较高。预装环境选择「系统镜像,Ubuntu 20.04」,地区随意,靠近自己为佳。

不买学生机或是不想备案的话,也可以直接购买轻量:https://www.aliyun.com/product/swas

一样是选择「香港,Ubuntu 20.04」。

连接服务器

使用 Xshell

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

如上图。

  1. 主机中填入购买服务器得到的IP地址
  2. 端口号默认是22,不用管他
  3. 然后点击连接,弹出来的东西就直接确认
  4. 用户名一般是root,但腾讯云使用 Ubuntu 镜像创建的实例,默认禁用 root 用户通过密码的方式登录,所以用户名得填ubuntu
  5. 密码是主机商给的,也填进去。若给的是密钥,就从主机商上下载下来,然后导入 Xshell,就可以选择密钥登陆。

使用 Visual Studio Code

下载并安装 Visual Studio Code:https://code.visualstudio.com/ ,打开,找到Extensions,点击安装扩展。

搜索chinese,安装简体中文,重启 Visual Studio Code;再搜索ssh,找到Remote - SSH,安装。安装完成后,左边多了一个远程资源管理器。接着进入到远程资源管理器的设置。

点击远程资源管理器,会出现下图。

点击设置的齿轮,弹出提示Select SSH confiquration file to update

选择第一个C:\User\xxx\.ssh\config,填写连接配置。

Host 名字是任意的,HostName就是ip地址;Port即端口,默认是22;User为用户名,如果是密钥登录,把密钥和config文件放在同一位置,例如

Host ubuntu
    HostName 192.0.0.1
    Port 22
    User root
    IdentityFile ~/.ssh/id_rsa

使用 SSH KEY 登录

腾讯云默认不开启root用户,得开启了才行。先用ubuntu和设置的密码登录到服务器,然后切换到root

sudo su root

然后修改/etc/ssh/sshd_config

vim /etc/ssh/sshd_config

vim的基本用法是,按i开始输入,方向键调整光标位置,按esc键退出输入,输入:wq保存。找到下面这些东西,全部改成yes,如果前面有#,就去掉。

RSAAuthentication yes
PubkeyAuthentication yes
PermitRootLogin yes

重启ssh

sudo service ssh restart

然后重新登录,改为使用root用户登录,开始创建密钥

ssh-keygen -t rsa -b 4096 -C "your_email@domain.com"

your_email@domain.com填写你的邮箱,所有提示全部按回车,直到提示

Your identification has been saved in /root/.ssh/id_rsa
Your public key has been saved in /root/.ssh/id_rsa.pub

即表示创建完成,其中,id_rsa 为私钥,id_rsa.pub为公钥。

接着在服务器上安装公钥

cd .ssh
cat id_rsa.pub >> authorized_keys

使用xftp或是vscode把私钥下载下来。

确认本地保存了私钥,就删除掉服务器上的私钥

rm id_rsa

再改用密钥登陆。若以私钥方式登录成功后,修改/etc/ssh/sshd_config ,禁用密码登录

PasswordAuthentication no

最后,重启 SSH 服务:

sudo service ssh restart

部署网络环境

因为我不喜欢宝塔,但又不会自己挨个安装 Nginx、MySQL、PHP,所以这里推荐使用的是 LNMP一键包。安装LNMP也有很多基本要求,这里以服务器配置为1H2G、Ubuntu 20.04为前提,安装最新版LNMP。

登录控制台,先切换到root用户

sudo su root

更新下系统基础环境

apt update && apt upgrade -y

安装点基础的软件

apt install -y wget git zip curl

清理下垃圾

apt autoremove

安装screen

apt install -y screen

启动一个新窗口

screen -S lnmp

如果网络掉线,执行screen -r lnmp,就能返回lnmp安装进程

安装LNMP是重头戏,咱一步一步来。这里的命令是安装1.8beta版本,如果有更新,请安装最新版本。

wget http://soft.vpser.net/lnmp/lnmp1.8beta.tar.gz -cO lnmp1.8.tar.gz && tar zxf lnmp1.8.tar.gz && cd lnmp1.8 && ./install.sh lnmp 

机器配置不太够的话,MySQL 5.7.34就够了。输入4,回车。

提示Please setup root password of MySQL.,意为输入MySQLroot用户密码,可以使用脚本默认的,后面再改,直接回车。

默认启用,回车。

来到PHP。因为Typecho的对PHP 8的兼容性不太好,很多主题也还没有支持PHP 8,所以这里输入10,然后回车。

这个也默认,回车。

然后过程就结束了,提示Press any key to install...or Press Ctrl+c to cancel,就继续回车,然后脚本就会自动安装Lnmp

更详细的步骤,参考官方的安装方法

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

注册域名

关于域名的购买问题,选择也有很多。只是搭建博客的话,可以在国内注册,因为比较便宜。若是想写一些不对劲的东西,还是得选择国外的域名商,比较妥当。具体自查。

以腾讯云为例,直奔 https://dnspod.cloud.tencent.com ,注册就完事了。

域名后缀,优先推荐.com.net等主流常见域。不推荐.xyz,因为百度不收录或收录极慢;也不推荐.top,因为被用烂了,个人感觉不太好看。

设置域名解析

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

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

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

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

安装博客程序 Typecho

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. 创建数据库

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

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

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

3. 安装 Typecho

按正常顺序,应该是先将域名添加到服务器,才能打开这个安装界面。

如果想先测试下连通性,可以暂时修改默认的default文件夹。将这个文件夹重命名为其他名称,然后把上面新建的blog文件夹重命名为default,就可以直接访问 IP 开始 Typecho 的初始设置部分。

注意把原先default文件夹中的phpMyadmin文件夹也挪到你的 typecho 文件夹中。

按照图中显示的那样,数据库适配器、数据库地址和数据库端口都保持默认,用户名是root数据库名是上面新建的数据库,比如blog数据库编码修改为utf8mb4,其他保持默认。

一定要选择utf8mb4,否则后续使用emoji会使数据库崩溃。

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

这是博客程序权限不够的原因。不建议新建config.inc.php文件,应该授予权限,防止后续还出现这类问题。

如果你的博客所在路径是/home/wwwroot/blog,那么就:

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

这样,博客的初始安装部分就结束了。

之后崭新的博客就出现了!

添加域名到服务器

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

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

用编辑器(推荐使用 Visual Studio Code)打开此文件,将下面的内容复制进去,修改第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 证书

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

关于 Typecho 的设置

站点名称、链接设置

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

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

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

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

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

网站 Logo

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

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

个人头像、昵称

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

伪静态

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

安装插件

以博客目录为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:评论邮件提醒插件

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

关于 VOID 主题的设置

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

归档

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

友链

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

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

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

[#/links]

超高级设置

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

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

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

Typecho 主题推荐

其他

博客图片问题

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

Markdown 语法问题

可以参考:常用Markdown语法

直接访问IP地址

用LNMP脚本创建的环境中,访问IP会跳转到LNMP的介绍页面,改掉它。

打开/usr/local/nginx/conf/nginx.conf,将其中的

server
    {
        listen 80 default_server;
        #listen [::]:80 default_server ipv6only=on;
        server_name _;
        index index.html index.htm index.php;
        root  /home/wwwroot/default;
省略

        access_log  /home/wwwlogs/access.log;
    }

注释掉或是直接删除掉即可。


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