个人网站 搭建记录

运行环境：Windows 10 22H2

软件版本：Apache 2.4 + PHP 8.2.12 + MySQL 8.2.0

搭建教程

准备安装 Typecho 进行搭建网页测试。下载下来没有html，诶??? php 是什么啊，打开怎么是源码啊。

此处省略一万字，去学习了静态网页和动态网页的区别。

安装 php 环境

首先安装 php 环境，在 Windows 系统下有集成式安装软件 Wampserver，一键安装。

但是这东西又丑又卡，还不断弹出 cmd 窗口让我觉得是病毒软件，虽然在上面搭建成功了但也反手卸载了。

不如自己动手安装！

参考教程：记一次windows配置PHP环境。

难得的优质教程，跟着他的教程来基本没有搜索别的内容了。

1 安装Apache2.4

1.1 Apache 的下载链接 The Apache HTTP Server Project

1.2 点击 a number of third party vendors 下载 windows 版本

1.3 选择 ApacheHaus

1.4 选择 x64 的版本下载

1.5 建立个人主页文件夹 Home，将下载的 apache 解压到其中。

1.6 用记事本打开 conf 中的 httpd.conf，找到如下代码段

Define SRVROOT "/Apache24"
ServerRoot "${SRVROOT}"

将引号内的内容改为 Apache 的路径。

Define SRVROOT "E:/CloudMusic/VSCode/Home/Apache24"
ServerRoot "${SRVROOT}"

1.7 更改端口号

Listen 80

默认端口号是80，浏览器输入 localhost 就能访问，可以改为其他

Listen 9700

1.8 用管理员身份打开 cmd，然后进入 apache 的 bin 路径，用 httpd -k install 进行安装

1.9 安装完成之后在 /Apache24/bin 中打开 ApacheMonitor.exe 并启用服务。

1.10 验证安装，在浏览器输入localhost:9700 如果打开 apache 的首页即为安装成功。

2 安装PHP

2.1 下载 PHP8.2，直接到官网下载即可，笔者选择的版本是 VS16 x64 Thread Safe (2023-Oct-24 21:57:24)

2.2 解压到个人主页文件夹中

2.3 打开PHP的目录将 php.ini-development 先复制一份备份，然后把 php.ini-development 改为 php.ini 保存

2.4 打开 php.ini 修改配置，查找

;extension_dir = "ext"

改为 extension_dir = "ext的目录"，比如

extension_dir = "E:/CloudMusic/VSCode/Home/PHP/ext"

2.5 打开 apache/conf 的 httpd.conf，在 DirectoryIndex 后加上 index.php

<IfModule dir_module>
    DirectoryIndex index.html index.php
</IfModule>

2.6 开启 rewrite 功能：将下面这行代码前面的 # 去掉（httpd.conf中）

#LoadModule rewrite_module modules/mod_rewrite.so

2.7 加载PHP模块，在 httpd.conf 中加入以下代码

#php8
LoadModule php_module E:/CloudMusic/VSCode/Home/PHP/php8apache2_4.dll
<IfModule php_module> 
        PHPIniDir "E:/CloudMusic/VSCode/Home/PHP/" 
        AddType application/x-httpd-php .php
        AddType application/x-httpd-php-source .phps
</IfModule>

2.8 验证，注释 apache24/htdocs 中 index.html 的网页代码，输入下边这个输入下边这个 Hello World 代码，然后重命名为 index.php.

<?php
echo"hello world"
?>

在电脑浏览器输入 localhost:9700 , 若能正确显示 hello world , 则 php 网页已经能够显示了。

3 安装mysql

3.1 官网下载链接。笔者选择的是 mysql-8.2.0-winx64.msi

3.2 直接安装的话可能会提示缺少 vs2019 的 redistributable. 到微软官网下载安装 VC_redist.x64.exe

3.3 以管理员身份进入cmd命令行。执行

cd C:\Program Files\MySQL\MySQL Server 8.2\bin
mysqld.exe --install
mysqld --initialize

3.4 在 win+r 之后输入 services.msc 进入本地服务管理，启动 mysql 服务。

3.5 登录需要输入密码。在 C:\Program Files\MySQL\MySQL Server 8.2\data 中后缀名为 err 的文件中找到临时密码，搜索如下字段

A temporary password is generated for root@localhost: &baRyjS-b5mp

3.6 输入 mysql -u root -p 和密码进行登录。登录之后修改密码。

 ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '123456';

3.7 输入如下代码创建数据库

create DATABASE home;

4 安装typecho

4.1 进入 /Apache24/htdocs 目录，将 typecho 解压到此处。在浏览器中打开 localhost:9700

4.2 安装提示缺少拓展，需要安装所需拓展。将 php.ini 对应的分号去掉即可。

;extension=mbstring
;extension=openssl
;extension=pdo_mysql

4.3 继续安装，数据库名称填 home，数据库密码填修改后的密码，其余问题不大。

4.4 安装完成后登录控制台，可以进行网页管理等操作。

4.5 第三方主题安装：解压到 /usr/themes ，插件安装：解压到 /usr/plugins ，启用即可。

4.6 若第三方主题启用失败建议查看 github issue 排查问题。

5 网站设置

主题设置可以在 控制台-外观-设置外观 里找到，在此处启用数学公式解析。

设置-基本设置-站点地址，可以更改站点地址。

启用https

如果不关心网站的“不安全”提示，SSL 证书可以暂时不管。

首先登录 Typecho 后台 -> 设置 -> 基本设置 -> 站点地址改成 https 的域名

然后编辑 Typecho 站点根目录下的文件config.inc.php加入下面一行配置。

/** 开启HTTPS */
define('__TYPECHO_SECURE__',true);

然后在站点主题目录下找到comments.php文件，并搜索到$this->commentUrl()，将其修改为：echo str_replace("http","https",$this->commentUrl())，然后点击保存即可。

在开启 https 之后，网站的所有图片外链都需要修改为 https 外链，否则无法正常加载。

内网穿透设置

使用 SakuraFrp，设置本地端口为 443 即可。

在网站未启用 https 的情况下，开启 “强制 https” 会有 bug，会把 http 请求都转换为 https，一些本地的图片资源链接 http://localhost/xxx 也会被强制转换为 http://home.ustc.edu.cn/~linzhehui626/xxx ，导致无法正常显示。

建议图片外链选择 github.io ，作为免费的图床。

站点地址改成 http://home.ustc.edu.cn/~linzhehui626 之后，还是会有 bug，在本地能打开网页，但在其他设备打开无法正常显示。需要将站点地址改为内网穿透地址。如笔者的 https://frp-oak.top:56651/。改了之后用 localhost 还是能登陆的，不用担心不小心把内网穿透隧道删除了而再也进不去了的问题。

首页静态Html生成

参考 Typecho生成首页静态HTML数倍提高网站打开速度

在网站根目录创建一个php文件，重命名为static.php

<?php
    $nowtime=time();
    $pastsec = $nowtime - $_GET["t"];
    if($pastsec<600){
      exit; //10分钟更新一次，时间可以自己调整
    }
    ob_start(); //打开缓冲区
    include("index.php");
    $content = ob_get_contents(); //得到缓冲区的内容
    $content .= "\n<script language=javascript src=\"static.php?t=".$nowtime."\"></script>";
    //加上调用更新程序的代码

    file_put_contents("index.html",$content);
    if (!function_exists("file_put_contents")){
      function file_put_contents($fn,$fs){
        $fp=fopen($fn,"w+");
        fputs($fp,$fs);
        fclose($fp);  
      }
    }
?>

设置网站优先打开 index.html 而不是index.php，即可在每次打开 html 提高速度，且会根据设定的时间间隔更新。

全站静态Html生成

参考 typecho全站静态化方案 、 typecho完全静态化

因动态网站部署麻烦，许多站点仅支持静态网站，如 github.io 。本方法可以导出全站的静态html。

创建以下脚本并命名为staticpass.php .

上述参考的代码是 Linux 环境下的代码，笔者已将其转化为 Windows 代码。需要手动安装 wget .

注意 url 是需要爬虫的网页地址，rurl是需要部署静态网页的地址，需要相应修改。

<?php
$url = 'http://home.ustc.edu.cn/~linzhehui626'; //网址，不能以"/"结尾
$rurl= ''; //要替换成路径或网址，可为空，不能以"/"结尾
$dir = __DIR__ . "/" . str_replace('https://', '', str_replace('http://', "", $url));
exec("cls",$clc);
echo $clc[0];
echo "开始下载文件\r\n";
exec("RMDIR /S /Q {$dir}",$return); //小心调用！
exec("wget --no-check-certificate -r -p -np {$url}",$return);

$dirs = get_filenamesbydir($dir);

//不处理非html文件
for ($i = 0; $i < count($dirs); $i++) {
    $file=str_replace(__DIR__, "", $dirs[$i]['file']);

    if (!preg_match("/html/",$file)  ) {
        //删除对应的元素
        echo "\r\n不处理文件:\r\n";
        echo $file;
        unset($dirs[$i]); 
    }  
}
array_filter($dirs);
sort($dirs);//重新生成索引下标

//网址处理
$count=count($dirs);
for ($i = 0; $i < $count; $i++) {
    // echo $url;
    // echo $rurl;
    $content=str_replace($url,$rurl,file_get_contents($dirs[$i]['file']));
    // echo $dirs[$i]['file'];
    file_put_contents($dirs[$i]['file'],$content);
    $n=$i+1;
    exec("cls",$clc);
    echo $clc[0];
    echo "文件下载完毕\r\n";
    echo "开始处理文件,共{$count}个文件需要处理,已处理{$n}个\r\n";
    
}
echo "处理完毕，文件目录：{$dir}\r\n";

function get_allfiles($path, &$files)
{
    if (is_dir($path)) {
        $dp = dir($path);
        while ($file = $dp->read()) {
            if ($file !== "." && $file !== "..") {
                get_allfiles($path . "/" . $file, $files);
            }
        }
        $dp->close();
    }
    if (is_file($path)) {
        $files[] = ['file' => $path];
    }
}
function get_filenamesbydir($dir)
{
    $files = array();
    get_allfiles($dir, $files);
    return $files;
}

执行

cd E:\CloudMusic\VSCode\Home\Apache24\htdocs
php staticpass.php

注意 "php 绝对目录下的staticpass.php" 代码会在当前目录（如未设置php环境变量就是在php根目录中）创建，而不是站点目录，笔者因为这个愚蠢的问题调试了一个多小时的 bug。

php代码调试

参考 vscode调试php（解决vscode远程调试无效的问题）

但因为静态网站转换的代码无问题，暂时不打算研究 php 调试相关的问题。

参考资料

博客范例参考链接

希卡米 | HiKami：Theme Argon By solstice23

初之音：Powered by Typecho Theme VOID

EdNovas 的小站 ：Framework Hexo Theme Butterfly

静态网页模板参考链接（没用上）

FreeHtml5

HTML5 UP

Web开发学习链接

mdn web docs

End