经过两天的努力,终于把网站弄(个性化)好了!
首先,要感谢苦力怕控在网站搭建期间提供的技术支持
搭建的过程中,我遇到了不少奇怪的问题,但是都在自己的努力下和苦力怕控的帮助下解决了,下面我会大致介绍一下搭建的过程
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),如果出现网页就说明安装成功了,例如这样:
用户名和密码和系统一致
然后找到防火墙设置,一般是在 网络-防火墙
然后添加系统服务
配置完成后,可以重启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
字体是没有效果的!
- 附上字体的设置作为参考:
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.php
,archive.php
,functions.php
,index.php
,以及includes文件夹内的footer.php
,header.php
。飘落的效果就是在之后的两者缝合进去的,并且我添加了style.min.css
,jquery.min.js
,snowfall.jquery.js
这三个文件,他们是我从另外一个主题爬过来的。
- 爆改的
404.php
,archive.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