经过两天的努力,终于把网站弄(个性化)好了!

首先,要感谢苦力怕控在网站搭建期间提供的技术支持
搭建的过程中,我遇到了不少奇怪的问题,但是都在自己的努力下和苦力怕控的帮助下解决了,下面我会大致介绍一下搭建的过程

1.服务器的环境搭建:

大致就是PHP,Apache,MariaDB的安装,这些网上已经有教程了,并且之前因为要弄别的服务,已经由苦力怕控帮我弄好了,就不过多赘述了。

2.博客平台的选择:

本来我想用WordPress的,但是听取了苦力怕控的意见,没必要部署一个资源消耗巨大的博客,Typecho就可以满足我的需求,于是乎我搭建了Typecho。
首先是下载Typecho,去其官网下载最新版,解压到对应目录即可,也就是你想部署网站的目录,我选择的是/home/typecho。因为我的服务器系统分区和数据分区是分开的,放到数据分区会更好管理。

[chocola@Neko-Server ~]$ df -hT
文件系统       类型      容量  已用  可用 已用% 挂载点
devtmpfs       devtmpfs  3.9G     0  3.9G    0% /dev
tmpfs          tmpfs     3.9G  4.0K  3.9G    1% /dev/shm
tmpfs          tmpfs     3.9G  170M  3.8G    5% /run
tmpfs          tmpfs     3.9G     0  3.9G    0% /sys/fs/cgroup
/dev/sda3      ext4       32G  7.1G   24G   23% /
tmpfs          tmpfs     3.9G  359M  3.6G   10% /tmp
/dev/md127     ext4      2.7T  703G  2.0T   26% /mnt/3t-r1
/dev/sda5      ext4      418G   60G  359G   15% /home
/dev/sda2      ext4      574M  250M  283M   47% /boot
/dev/sda1      vfat      100M   17M   83M   17% /boot/efi
/dev/sdb1      ext4      110G   14G   91G   14% /mnt/ssd
tmpfs          tmpfs     792M   36K  792M    1% /run/user/1000

然后是配置数据库,为其建立一个专用的数据库

mariadb -u root -p
CREATE USER 'typecho'@'localhost' IDENTIFIED BY 'password';
GRANT ALL PRIVILEGES ON `typecho`.* TO 'typecho'@'localhost';
FLUSH PRIVILEGES;

接下来是添加Apache的配置文件,其位置位于/etc/httpd/conf.d/

nano /etc/httpd/conf.d/typecho-ssl.conf 
nano /etc/httpd/conf.d/ssl-3939.conf 

配置文件的内容我放出来给你们做一下参考:
typecho-ssl.conf 这个文件是用来配置网页服务根目录的,也就是你网站所在的位置

#<IfModule mod_ssl.c>
<VirtualHost *:3939>

    ServerAdmin your_email@emmail.com
    DocumentRoot /home/typecho

    ServerName www.miku39.win
    ServerAlias *

    <Directory /home/typecho>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Require all granted
        <IfModule mod_dav.c>
            Dav off
        </IfModule>
       # Include conf.d/php83-php.conf
    </Directory>
    # SSL Configuration
    SSLEngine On
    SSLCertificateKeyFile "/home/chocola/data/certs/miku39_win.key"
    SSLCertificateFile "/home/chocola/data/certs/miku39_win.pem"
    #SSLCertificateChainFile /home/chocola/data/certs/le-chain.pem Configure FastCGI
    <FilesMatch \.php$>
        SetHandler "proxy:fcgi://127.0.0.1:10082"
    </FilesMatch>
    <FilesMatch "\.(cgi|shtml|phtml|php)$">
        SSLOptions +StdEnvVars
    </FilesMatch>

</VirtualHost>

#</IfModule>

ssl-3939.conf 这个文件是开启对应端口TLS加密的,以便可以通过HTTPS访问,提高安全性

#
# When we also provide SSL we have to listen to the 
# standard HTTPS port in addition.
#
Listen 3939 https

##
##  SSL Global Context
##
##  All SSL configuration in this context applies both to
##  the main server and all SSL-enabled virtual hosts.
##

#   Pass Phrase Dialog:
#   Configure the pass phrase gathering process.
#   The filtering dialog program (`builtin' is a internal
#   terminal dialog) has to provide the pass phrase on stdout.
SSLPassPhraseDialog exec:/usr/libexec/httpd-ssl-pass-dialog

#   Inter-Process Session Cache:
#   Configure the SSL Session Cache: First the mechanism 
#   to use and second the expiring timeout (in seconds).
SSLSessionCache         shmcb:/run/httpd/sslcache(512000)
SSLSessionCacheTimeout  300

#
# Use "SSLCryptoDevice" to enable any supported hardware
# accelerators. Use "openssl engine -v" to list supported
# engine names.  NOTE: If you enable an accelerator and the
# server does not start, consult the error logs and ensure
# your accelerator is functioning properly. 
#
SSLCryptoDevice builtin
#SSLCryptoDevice ubsec

##
## SSL Virtual Host Context
##
<VirtualHost _default_:3939>

#ServerName www.miku39.win
#SSLCertificateKeyFile "/home/chocola/data/certs/miku39_win.key"
#SSLCertificateFile "/home/chocola/data/certs/miku39_win.pem"
#SSLCACertificateFile "/home/chocola/data/certs/le-chain.pem"
# General setup for the virtual host, inherited from global configuration
#DocumentRoot "/home/typecho"
#ServerName www.example.com:443

# Use separate log files for the SSL virtual host; note that LogLevel
# is not inherited from httpd.conf.
ErrorLog logs/ssl_error_log
TransferLog logs/ssl_access_log
LogLevel warn

#   SSL Engine Switch:
#   Enable/Disable SSL for this virtual host.
SSLEngine on

#   List the protocol versions which clients are allowed to connect with.
#   The OpenSSL system profile is used by default.  See
#   update-crypto-policies(8) for more details.
#SSLProtocol all -SSLv3
#SSLProxyProtocol all -SSLv3

#   User agents such as web browsers are not configured for the user's
#   own preference of either security or performance, therefore this
#   must be the prerogative of the web server administrator who manages
#   cpu load versus confidentiality, so enforce the server's cipher order.
SSLHonorCipherOrder on

#   SSL Cipher Suite:
#   List the ciphers that the client is permitted to negotiate.
#   See the mod_ssl documentation for a complete list.
#   The OpenSSL system profile is configured by default.  See
#   update-crypto-policies(8) for more details.
SSLCipherSuite PROFILE=SYSTEM
SSLProxyCipherSuite PROFILE=SYSTEM

#   Point SSLCertificateFile at a PEM encoded certificate.  If
#   the certificate is encrypted, then you will be prompted for a
#   pass phrase.  Note that restarting httpd will prompt again.  Keep
#   in mind that if you have both an RSA and a DSA certificate you
#   can configure both in parallel (to also allow the use of DSA
#   ciphers, etc.)
#   Some ECC cipher suites (http://www.ietf.org/rfc/rfc4492.txt)
#   require an ECC certificate which can also be configured in
#   parallel.
SSLCertificateFile /etc/pki/tls/certs/localhost.crt

#   Server Private Key:
#   If the key is not combined with the certificate, use this
#   directive to point at the key file.  Keep in mind that if
#   you've both a RSA and a DSA private key you can configure
#   both in parallel (to also allow the use of DSA ciphers, etc.)
#   ECC keys, when in use, can also be configured in parallel
SSLCertificateKeyFile /etc/pki/tls/private/localhost.key

#   Server Certificate Chain:
#   Point SSLCertificateChainFile at a file containing the
#   concatenation of PEM encoded CA certificates which form the
#   certificate chain for the server certificate. Alternatively
#   the referenced file can be the same as SSLCertificateFile
#   when the CA certificates are directly appended to the server
#   certificate for convenience.
#SSLCertificateChainFile /etc/pki/tls/certs/server-chain.crt

#   Certificate Authority (CA):
#   Set the CA certificate verification path where to find CA
#   certificates for client authentication or alternatively one
#   huge file containing all of them (file must be PEM encoded)
#SSLCACertificateFile /etc/pki/tls/certs/ca-bundle.crt

#   Client Authentication (Type):
#   Client certificate verification type and depth.  Types are
#   none, optional, require and optional_no_ca.  Depth is a
#   number which specifies how deeply to verify the certificate
#   issuer chain before deciding the certificate is not valid.
#SSLVerifyClient require
#SSLVerifyDepth  10

#   Access Control:
#   With SSLRequire you can do per-directory access control based
#   on arbitrary complex boolean expressions containing server
#   variable checks and other lookup directives.  The syntax is a
#   mixture between C and Perl.  See the mod_ssl documentation
#   for more details.
#<Location />
#SSLRequire (    %{SSL_CIPHER} !~ m/^(EXP|NULL)/ \
#            and %{SSL_CLIENT_S_DN_O} eq "Snake Oil, Ltd." \
#            and %{SSL_CLIENT_S_DN_OU} in {"Staff", "CA", "Dev"} \
#            and %{TIME_WDAY} >= 1 and %{TIME_WDAY} <= 5 \
#            and %{TIME_HOUR} >= 8 and %{TIME_HOUR} <= 20       ) \
#           or %{REMOTE_ADDR} =~ m/^192\.76\.162\.[0-9]+$/
#</Location>

#   SSL Engine Options:
#   Set various options for the SSL engine.
#   o FakeBasicAuth:
#     Translate the client X.509 into a Basic Authorisation.  This means that
#     the standard Auth/DBMAuth methods can be used for access control.  The
#     user name is the `one line' version of the client's X.509 certificate.
#     Note that no password is obtained from the user. Every entry in the user
#     file needs this password: `xxj31ZMTZzkVA'.
#   o ExportCertData:
#     This exports two additional environment variables: SSL_CLIENT_CERT and
#     SSL_SERVER_CERT. These contain the PEM-encoded certificates of the
#     server (always existing) and the client (only existing when client
#     authentication is used). This can be used to import the certificates
#     into CGI scripts.
#   o StdEnvVars:
#     This exports the standard SSL/TLS related `SSL_*' environment variables.
#     Per default this exportation is switched off for performance reasons,
#     because the extraction step is an expensive operation and is usually
#     useless for serving static content. So one usually enables the
#     exportation for CGI and SSI requests only.
#   o StrictRequire:
#     This denies access when "SSLRequireSSL" or "SSLRequire" applied even
#     under a "Satisfy any" situation, i.e. when it applies access is denied
#     and no other module can change it.
#   o OptRenegotiate:
#     This enables optimized SSL connection renegotiation handling when SSL
#     directives are used in per-directory context. 
#SSLOptions +FakeBasicAuth +ExportCertData +StrictRequire
<FilesMatch "\.(cgi|shtml|phtml|php)$">
    SSLOptions +StdEnvVars
</FilesMatch>
<Directory "/var/www/cgi-bin">
    SSLOptions +StdEnvVars
</Directory>

#   SSL Protocol Adjustments:
#   The safe and default but still SSL/TLS standard compliant shutdown
#   approach is that mod_ssl sends the close notify alert but doesn't wait for
#   the close notify alert from client. When you need a different shutdown
#   approach you can use one of the following variables:
#   o ssl-unclean-shutdown:
#     This forces an unclean shutdown when the connection is closed, i.e. no
#     SSL close notify alert is sent or allowed to be received.  This violates
#     the SSL/TLS standard but is needed for some brain-dead browsers. Use
#     this when you receive I/O errors because of the standard approach where
#     mod_ssl sends the close notify alert.
#   o ssl-accurate-shutdown:
#     This forces an accurate shutdown when the connection is closed, i.e. a
#     SSL close notify alert is sent and mod_ssl waits for the close notify
#     alert of the client. This is 100% SSL/TLS standard compliant, but in
#     practice often causes hanging connections with brain-dead browsers. Use
#     this only for browsers where you know that their SSL implementation
#     works correctly. 
#   Notice: Most problems of broken clients are also related to the HTTP
#   keep-alive facility, so you usually additionally want to disable
#   keep-alive for those clients, too. Use variable "nokeepalive" for this.
#   Similarly, one has to force some clients to use HTTP/1.0 to workaround
#   their broken HTTP/1.1 implementation. Use variables "downgrade-1.0" and
#   "force-response-1.0" for this.
BrowserMatch "MSIE [2-5]" \
         nokeepalive ssl-unclean-shutdown \
         downgrade-1.0 force-response-1.0

#   Per-Server Logging:
#   The home of a custom SSL log file. Use this when you want a
#   compact non-error SSL logfile on a virtual host basis.
CustomLog logs/ssl_request_log \
          "%t %h %{SSL_PROTOCOL}x %{SSL_CIPHER}x \"%r\" %b"

</VirtualHost>

弄完这些之后,就要配置防火墙了
如果你和我一样用的AlmaLinux的话,可以打开系统自带的网页管理面板,没安装的话装上就可以了
安装:

yum install cockpit

开启网页面板:

systemctl enable --now cockpit.socket

然后你打开你的浏览器,访问你服务器所在的ip地址加端口号9090,例如https://172.16.0.39:9090(是的,cockpit默认开启TLS),如果出现网页就说明安装成功了,例如这样:
Screenshot_20240306_200310.png
用户名和密码和系统一致
然后找到防火墙设置,一般是在 网络-防火墙
Screenshot_20240306_200555.png
然后添加系统服务
Screenshot_20240306_200718.png

配置完成后,可以重启Apache看看有没有效果

systemctl restart httpd

如果能正常重启Apache并且在所指定的端口可以访问了,恭喜你,部署成功。
接下来按照默认的设置配置你的用户名,还有本地的数据库即可。

3.美化Typecho

我用的是Cuckoo主题模板,并且魔改成了现在这样子的初音主题,并且缝合了Shamiko的元素飘落效果,如果你需要我魔改的版本的话,可以在此获取。如果Github上不去的话,可以下载这个Cuckoo.zip ,已经打包好了,Typecho本体我也给一下吧typecho.zip
插件用了PioLive2D插件,HoerMouse鼠标点击特效(就是gitee这个垃圾网站恶心人,下载还要登陆)LoginDesigner登陆界面美化。
主题文件应该放在typecho/usr/themesr文件夹下
插件文件应该放在typecho/usr/plugins文件夹下
放进去后刷新一下界面应该就能看到效果了。
在这里说一下,字体需要woff2格式才能奏效,ttf字体是没有效果的!

  • 附上字体的设置作为参考:
    Screenshot_20240306_205106.png
  • font.css文件内容:

    /* latin-ext */
    @font-face {
    font-family: 'Hanalei Fill';
    font-style: normal;
    font-weight: 400;
    src: url(https://www.miku39.win:3939/usr/themes/Cuckoo/assets/fonts/cute.woff2) format('woff2');
    }
    /* latin */
    @font-face {
    font-family: 'Hanalei Fill';
    font-style: normal;
    font-weight: 400;
    src: url(https://www.miku39.win:3939/usr/themes/Cuckoo/assets/fonts/cute.woff2) format('woff2');
    }

小尾巴:爆改了那里?

具体来说,我爆改了主题文件夹目录下的404.phparchive.phpfunctions.phpindex.php,以及includes文件夹内的footer.phpheader.php。飘落的效果就是在之后的两者缝合进去的,并且我添加了style.min.cssjquery.min.jssnowfall.jquery.js这三个文件,他们是我从另外一个主题爬过来的。

  • 爆改的404.phparchive.php我在微找到内容的界面添加了图像:
  • 爆改前:

        <?php else : ?>
          <div class="mdui-card archive-card mdui-hoverable">
            <div class="archive-title">
              <p>不要看这里!这里没有文章呐!</p>
            </div>
          </div>
        <?php endif;
  • 爆改后:

        <?php else : ?>
          <div class="mdui-card archive-card mdui-hoverable">
          <img src="<?php staticFiles('images/404.png') ?>" alt="404" style="width: 400px; height: auto; display: block; margin: auto;"></img>
            <div class="archive-title">
            <p style="font-size: 24px; font-weight: bold;">喵?!不要看这里喵!这里没有文章喵!!!</p>
            </div>
          </div>
        <?php endif;
  • 添加抽屉背景,位于header.php
  • 爆改前:

    <div class="mdui-drawer mdui-drawer-close mdui-drawer-full-height drawer">
      <div class="drawer-img"><img class="mdui-img-circle" src="<?php setting("logoUrl", "images/logo.jpg"); ?>" /></div>
      <div class="drawer-contact">
        <?php contact() ?>
      </div>
      <div class="mdui-divider"></div>
      <ul class="mdui-list drawer-list" mdui-collapse="{accordion: true}">
        <a href="<?php Helper::options()->siteUrl() ?>" mdui-drawer-close>
          <li class="mdui-list-item mdui-ripple"><i class="mdui-list-item-icon mdui-icon material-icons">home</i>
            <div class="mdui-list-item-content">首页</div>
          </li>
        </a>
        <?php otherMenu(); ?>
      </ul>
      <?php drawerBottom() ?>
    </div>
  • 爆改后:

    <div class="mdui-drawer mdui-drawer-close mdui-drawer-full-height drawer">
      <div class="drawer-img"><img class="mdui-img-circle" src="<?php setting("logoUrl", "images/logo.jpg"); ?>" /></div>
      <div class="drawer-contact">
        <?php contact() ?>
      </div>
      <div class="mdui-divider"></div>
      <ul class="mdui-list drawer-list" mdui-collapse="{accordion: true}">
        <a href="<?php Helper::options()->siteUrl() ?>" mdui-drawer-close>
          <li class="mdui-list-item mdui-ripple"><i class="mdui-list-item-icon mdui-icon material-icons">home</i>
            <div class="mdui-list-item-content">首页</div>
          </li>
        </a>
        <?php otherMenu(); ?>
      </ul>
      <?php drawerBottom() ?>
      <img src="<?php staticFiles('images/drawer.png') ?>" alt="底部图片" style="width: 100%; height: auto; display: block; margin-top: -260px;"></img>
    </div>
  • 添加飘落效果:
  • footer.php文件增加如下代码:

    <script src="<?php staticFiles('js/jquery.min.js') ?>"></script>
    <script src="<?php staticFiles('js/snowfall.jquery.js') ?>"></script>
    
    
    <!-- snowfall.js setting-->
    <script type="text/javascript">
    $('#snowwrap').snowfall({
    image : [
    "<?php staticFiles('images/flake01_a.png') ?>",
    "<?php staticFiles('images/flake02_c.png') ?>",
    "<?php staticFiles('images/flake03_c.png') ?>",
    "<?php staticFiles('images/flake04_a.png') ?>",
    "<?php staticFiles('images/flake05_a.png') ?>",
    "<?php staticFiles('images/flake06_b.png') ?>"
    ],
    flakeColor:"#000",
    shadow:false,
    minSize:20,
    maxSize:80,
    flakeCount:40,
    minspeed:0.2,
    maxSpeed:2,
    });
    </script>
    <!-- /snowfall.js setting -->
  • header.php的修改:
  • 修改前:

    <link rel="stylesheet" href="<?php staticFiles('css/cuckoo.min.css') ?>">
    <script src="<?php staticFiles('js/tocbot.min.js') ?>"></script>
    <script src="<?php staticFiles('js/nprogress.min.js') ?>"></script>
    <?php fontFamily(); $this->header('antiSpam=&commentReply='); bgUrl(); otherCss();?>
    </head>
    
    <body class="mdui-theme-primary-<?php echo $primaryColor; ?> mdui-theme-accent-<?php echo $accentColor; ?>">
    <div class="background"><div class="index-filter"></div></div>
    <div class="mdui-appbar mdui-shadow-0 mdui-appbar-fixed mdui-appbar-scroll-hide">
      <div class="mdui-toolbar">
        <a class="mdui-btn mdui-btn-icon" mdui-drawer="{target: '.drawer', swipe: 'true', overlay: 'false'}">
          <i class="mdui-icon material-icons">menu</i>
        </a>
  • 修改后:

    <link rel="stylesheet" href="<?php staticFiles('css/cuckoo.min.css') ?>">
    <link rel="stylesheet" href="<?php staticFiles('css/style.min.css') ?>">
    <script src="<?php staticFiles('js/tocbot.min.js') ?>"></script>
    <script src="<?php staticFiles('js/nprogress.min.js') ?>"></script>
    <?php fontFamily(); $this->header('antiSpam=&commentReply='); bgUrl(); otherCss();?>
    </head>
    
    
    
    <body class="mdui-theme-primary-<?php echo $primaryColor; ?> mdui-theme-accent-<?php echo $accentColor; ?>">
    <div class="background"><div id="snowwrap" class="animated fadeIn timing01"></div></div>
    <div class="mdui-appbar mdui-shadow-0 mdui-appbar-fixed mdui-appbar-scroll-hide">
      <div class="mdui-toolbar">
        <a class="mdui-btn mdui-btn-icon" mdui-drawer="{target: '.drawer', swipe: 'true', overlay: 'false'}">
          <i class="mdui-icon material-icons">menu</i>
        </a>
  • 服务器运行在线时间:爆改 functions.php,增加计时函数:

    $content .= ($moebei) ? '<span><a href="https://icp.gov.moe" target="_blank">萌ICP备</a><a href="https://icp.gov.moe/?keyword='.$num2.'" target="_blank">'.$num2.'</a>号</span>' : '';
    $content .= ($beian) ? '<span><a href="//beian.miit.gov.cn">'.Helper::options()->beian.'</a></span>' : '';
    $content .= ($gabeian) ? '<span><img style="vertical-align:middle" src="'.staticFiles('images/beian.png', 1).'" height="20" width="20" alt="公安备案"> <a href="//www.beian.gov.cn/portal/registerSystemInfo?recordcode='.$num.'">'.Helper::options()->gabeian.'</a></span>' : '';
    $systemUptime = getServerUptime(); //获取时间
    echo $footer.'<p>'.$copy.$content.'<br><br><span id="cuckoo-copy">Theme <a href="https://github.com/bhaoo/cuckoo" target="_blank">Cuckoo</a> by <a href="https://dwd.moe/" target="_blank">Bhao</a>|Powered By <a href="http://www.typecho.org" target="_blank">Typecho</a>|猫猫服务器已运行:'.$systemUptime.'喵~</span></p>';
    }
    
    // 新增的计时函数
    function getServerUptime() {
      // 尝试使用 uptime -s 获取上线时间
      date_default_timezone_set('Asia/Shanghai');
      $startupTime = shell_exec('uptime -s');
    
      // 如果 uptime -s 不可用或输出格式不正确,使用当前系统时间作为上线时间
      if (empty($startupTime) || !preg_match('/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/', $startupTime)) {
          $startupTime = date('Y-m-d H:i:s');
      }
    
      // 将上线时间点字符串转换为 DateTime 对象
      $startupDateTime = new DateTime($startupTime);
    
    
      // 获取当前时间的 DateTime 对象
      $now = new DateTime();
    
      // 计算时间差
      $interval = $now->diff($startupDateTime);
    
      // 返回格式化后的时间差
      //return $interval->format('%a天%H小时%I分钟%S秒');
      return $interval->format('%a天%H时%I分');
    }

最后把图片文件替换掉,新增需要的文件,就可以了
一不小心把小尾巴搞成大尾巴了。。。QAQ