apache2 搭建网站并解析 markdown 文件

木欣欣粉皮

已于 2023-09-30 00:21:49 修改

阅读量275

点赞数 1

文章标签：服务器 apache ubuntu

于 2023-09-29 20:49:28 首次发布

本文链接：https://blog.csdn.net/lurenyi0724/article/details/133419963

版权

为实验室搭建一个网站，用来记录实验设备的设置和教程，考虑到用markdown文件记录的方便性，遂给网站加上了解析markdown文件的功能。

搭建 Apache2 网站

安装 apache2

sudo apt update
sudo apt-get install apache2

同样的，服务的启动、关闭、状态查询、重启

sudo systemctl start apache2
sudo systemctl stop apache2
sudo systemctl status apache2
sudo systemctl restart apache2

然后查看 ip ，看能否访问即可

安装php

sudo apt-get install php

用下述测试下即可

<?php phpinfo();?>

安装apache2和php比较简单，且网上教程较多。

apache2服务器的搭建和配置步骤详解 - Python技术站

解析 markdown 文件

因为平时记笔记用的是markdown，因此最好网页能够直接展示markdown，而不需要总将markdown转换成html。注意如果不进行解析或者其它处理，在chrome和edge等浏览器上，markdown文件的中文无法正常展示（乱码），而在微信浏览器上可以，但是是以源文件的形式。这里是希望markdown文件能够被展示类似成渲染后的样子。

因解析markdown文件的方法网上的内容较少，以下的方法主要来自chatgpt。

首先在使用chatgpt的方法之前，我稍微测试了下以下两个网站，感觉能够提供一些信息，但不清楚为啥还是无法解析。

Apache配置支持markdown格式-CSDN博客
 打造像github的Apache在线PHP版markdown、C、Java文件阅读器_c文件阅读器-CSDN博客

有一个网站成功了。
Serving Markdown Direct from Apache · Caolan

而接下来我主要展示chatgpt的方法

修改apache配置文件

在之前的很多网站上是修改 httpd.conf 文件，但我并没有找到，经过查找发现另一个配置文件 /etc/apache2/apache2.conf。

在文件中添加如下语句，这是为了使 .htaccess 文件生效（具体可以问下百度）

<Directory /var/www/html/>
    AllowOverride All
</Directory>

添加 `.htaccess` 文件

这个文件似乎有些安全问题，不过这里忽略。在 /var/www/html （apache默认的网页存放地址）文件夹内，新建 .htaccess 文件，内容是

RewriteEngine On
RewriteRule ^(.*\.md)$ handler.php [L]

这里就是用 handler.php 处理所有的 *.md 文件

php解析markdown文件

这里的解析就是指将markdown文件转换成html。在 /var/www/html 文件夹内，新建 handler.php 文件，内容是

<?php
require 'Parsedown.php'; // Replace with the correct path to Parsedown.php

// Create a Parsedown object
$parsedown = new Parsedown();

// Get the requested Markdown file path from the URL
$requestedFile = urldecode($_SERVER['REQUEST_URI']);
$markdownFile = $_SERVER['DOCUMENT_ROOT'] . $requestedFile;

// Check if the Markdown file exists
if (file_exists($markdownFile) && pathinfo($markdownFile, PATHINFO_EXTENSION) === 'md') {
    // Read the Markdown content from the file
    $markdownContent = file_get_contents($markdownFile);

    // Convert Markdown to HTML
    $htmlContent = $parsedown->text($markdownContent);

    // Output the HTML content
    //echo $htmlContent;

    echo "<!DOCTYPE html>
    <html lang='en'>
    <head>
        <meta charset='UTF-8'>
        <meta name='viewport' content='width=device-width, initial-scale=1.0'>
        <title>$requestedFile</title>
        <link rel='stylesheet' href='../styles.css'> <!-- Add this line to link to your CSS file -->
    </head>
    <body>
         $htmlContent
    </body>
    </html>";

} else {
    // Handle the case where the requested file is not a Markdown file
    http_response_code(404);
    echo "File not found";
}
?>

其实可以更简短一些，但这里姑且算了，稍微解释下。

从 erusev/parsedown at 1.7.4 下载解析md 文件的解析器 Parsedown.php 放在目录 /var/www/html 下。下面是调用解析器。

require 'Parsedown.php';

处理中文的文件名

$requestedFile = urldecode($_SERVER['REQUEST_URI']);

添加 css 样式。

echo "<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>$requestedFile</title>
<link rel='stylesheet' href='../styles.css'> <!-- Add this line to link to your CSS file -->
</head>
<body>
$htmlContent
</body>
</html>";

不需要css样式的话，直接 echo $htmlContent; 即可。

最后重启下服务就可以了。注意这里我将所有重要的文件都放在了 /var/www/html 文件内，这是一个取巧的方法，最好有其它位置，但需要更加细致研究下。

css样式也提供下，如果有更好的样式，欢迎分享 😃

/* GitHub-like Markdown Styles */
body {
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1.6;
    background-color: #f6f8fa;
    color: #333;
    margin: 0;
    padding: 20px;
}

/* Container for the Markdown content */
.markdown-container {
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    color: #333;
    margin-top: 20px;
}

h1 {
    font-size: 28px;
}

h2 {
    font-size: 24px;
}

h3 {
    font-size: 20px;
}

h4 {
    font-size: 18px;
}

h5 {
    font-size: 16px;
}

h6 {
    font-size: 14px;
}

/* Paragraphs */
p {
    margin: 15px 0;
}

/* Links */
a {
    color: #0366d6;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Lists */
ul, ol {
    margin-left: 20px;
    margin-bottom: 20px;
}

li {
    margin: 5px 0;
}

/* Code blocks */
pre {
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 10px;
    margin: 10px 0;
    overflow-x: auto;
}

code {
    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 14px;
    color: #333;
    background-color: transparent;
    border: none;
    white-space: pre-wrap;
}

/* Blockquotes */
blockquote {
    border-left: 4px solid #dfe2e5;
    padding: 10px 20px;
    margin: 15px 0;
    background-color: #f6f8fa;
}

/* Horizontal Rule */
hr {
    border: none;
    border-top: 1px solid #d1d5da;
    margin: 20px 0;
}

修改目录样式

apache 2.4 - Apache2 mod_autoindex IndexStyleSheet Directive not applying CSS within mod_userdir directories - Server Fault
在 .htaccess 文件中添加

IndexOptions FancyIndexing HTMLTable FoldersFirst IgnoreCase SuppressDescription SuppressHTMLPreamble SuppressLastModified VersionSort SuppressColumnSorting IconsAreLinks NameWidth=30
IndexStyleSheet "/style.css"

然后就可以了，这里把 style.css 的样式也提供下

/* Custom styles for Apache directory listing */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f6f6f6;
}

a {
    text-decoration: none;
    color: #0366d6;
}

/* Remove borders and padding from table cells */
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    border: none;
    padding: 5px; /* Adjust the padding as needed */
}

/* Add some spacing between rows on hover */
tr:hover {
    background-color: #e0e0e0;
}