皓清的个人博客

个人博客网站搭建 - 详细流程

 
  • 2022年 04月10日

第三次网站搭建流程 2022

博客搭建

图片配置

如果是下面这样的图片链接，网站可以正常显示，而且当在网站指向图片时会弹出图片网址提示

image-20220618214346597

如果是下面这样的链接，网站也可以正常显示，但是当在网站指向这个图片时，不会弹出图片网址提示

image-20220618214557015

所以更推荐使用第一种图片外链方式

Snipaste_2022-06-18_21-36-09

文章规定抬头

带图片封面的模板抬头如下，其他模板参考模板README文档。

title: VisitorMS - 访客管理控制系统
tags: Project
article_header:
  type: cover
  image:
    src: /5.jpg

其中src为博文封面照片，放在仓库根目录下，可以正常索引显示

image-20220618214908023

规定文章命名方式

image-20220618214715308

使用Typora自动上传图片到阿里云OSS

  1. 具体配置方法参考另一篇笔记。
  2. 以后写博文，只需要打开Typroa自动上传图片的设置，然后将文章图片一起复制到Typora博文中，即可自动上传图片到阿里云oss。大大提高效率。

博文写作步骤

  1. 先去阿里云控制台，建立笔记图片存放目录

    • https://oss.console.aliyun.com/bucket/oss-cn-hangzhou/photo-hq/object

    • image-20220619105812139

  2. 设置PicGo软件中图片上传指定存储路径

    • image-20220619140819761

  3. 打开Typora图片上传规则

    • image-20220619105948551

  4. 在本地博客仓库目录中，撰写博文

    • image-20220619110047842

    • 配置博文抬头

      image-20220619110114447

    • 将笔记复制到这个博文中

  5. 使用Git推送博文（完成博文上传）

博文内容要求

封面照片

原本打算将封面图片都存放到 _photo 目录下，结果实测还是链接不到，所以图片只能放到根目录下

image-20220619131040998

第二次网站搭建流程 2022

个人网站的目标效果 - 搭建在服务器上

  • https://interviewguide.cn/notes/01-guide/web-guide-reading.html#%E4%B8%80%E3%80%81%E6%9C%AC%E7%AB%99%E7%9F%A5%E8%AF%86%E9%80%9F%E8%A7%88

    image-20220602140906727

  • https://xiaolincoding.com/network/1_base/what_happen_url.html#%E5%AD%A4%E5%8D%95%E5%B0%8F%E5%BC%9F-http

    image-20220602140939939

  • https://programmercarl.com/%E5%89%8D%E5%BA%8F/%E7%A8%8B%E5%BA%8F%E5%91%98%E7%AE%80%E5%8E%86.html#%E7%AE%80%E5%8E%86%E7%AF%87%E5%B9%85

    image-20220602141010355

  • https://www.r2coding.com/#/README?id=api%e7%ae%a1%e7%90%86%e6%96%87%e6%a1%a3%e7%ae%a1%e7%90%86

    image-20220602141034216

个人网站的目标效果 - 搭建在GitHub上

  • http://www.openedv.com/docs/boards/arm-linux/zdyz-i.mx6ull.html

    image-20220602141135207

  • http://download.100ask.net/books/Linux/ELADCMFor4412/index.html

    image-20220602141201078

搭建方案

在服务器上搭建博客

第一种网站搭建方式涉及到前端后端，而且要使用自己的服务器，虽然自己有服务器，但是2021年按照教程搭建失败了，而且学习成本比较高，目前不推荐，后面维护起来可能也有难度，先尝试后面的几种方案。

在GitHub上搭建博客

目标效果如上一节第二种网站效果。

可以采用多种工具实现。

工具一 - SPHINX

采用工具：https://www.sphinx-doc.org/en/master/

image-20220602141522575

参考教程：https://docs.readthedocs.io/en/stable/tutorial/

image-20220602141404012

参考主题：https://github.com/readthedocs/sphinx_rtd_theme

image-20220602141441922

其他教程：https://www.bilibili.com/read/cv11923872

https://www.bilibili.com/video/BV1S5411T7Qg?spm_id_from=333.337.search-card.all.click

好像还是会出现图片显示的问题，而且使用这个工具还需要安装配置，所以选择使用工具二HEXO。

image-20220602145155621

工具二 - HEXO

推荐教程

https://www.cnblogs.com/huanhao/p/hexobase.html

参考教程

https://wushishu.xyz/post/be8880ea.html

https://www.bilibili.com/video/BV1NY4y1C7Ng?spm_id_from=333.337.search-card.all.click

https://www.bilibili.com/video/BV1aV411p7Bc/?spm_id_from=333.788

搭建流程 - 采用HEXO+GitHub

参考教程：https://www.bilibili.com/video/BV1Xh411b7wh?p=3

  1. GitHub新建仓库（仓库名称需要.github.io形式），并关联到本地文件夹

    image-20220602150931036

    image-20220602150644278

  2. 启用Page功能

    image-20220602153644166

  3. 挑选模板来建站。

    • 官方模板网站：https://hexo.io/themes/

    • 本次使用模板网址：https://github.com/kitian616/jekyll-TeXt-theme，下载后放到git文件夹中，然后push到仓库，效果如下

      该主题教程网址：https://tianqi.name/jekyll-TeXt-theme/docs/zh/quick-start

      image-20220602153732501

  4. 修改模板配置文件，来修改主题，添加自己的博客文章。配置介绍参考README文档。

    • image-20220602153306073

    • 修改蓝色字符串即为修改配置。

      image-20220602153934378

      参考修改样式。

      image-20220602154046967

    • 添加博客推文。所有的推文都放在_posts文件夹下。

      image-20220602154336400

    • 撰写博客需要遵守的规范：https://tianqi.name/jekyll-TeXt-theme/docs/zh/writing-posts

      image-20220602154640683

      image-20220602154655435

  5. 根据主题教程网址：https://tianqi.name/jekyll-TeXt-theme/docs/zh/quick-start，来定制自己的博客。

    image-20220602162508273

  6. 搞了半天，弄完了，效果如下。

    https://wuxiaolie.github.io/hq.github.io/

    image-20220602201511115

    https://wuxiaolie.github.io/hq.github.io/archive.html

    image-20220602201655701

    https://wuxiaolie.github.io/hq.github.io/about.html

    image-20220602201820188

    https://wuxiaolie.github.io/hq.github.io/2022/06/01/Welcome-to-my-blog.html

    image-20220602201544495

    image-20220602201558872

    https://wuxiaolie.github.io/hq.github.io/2022/06/01/VisitorMS.html

    image-20220602201613250

    image-20220602201642751

  7. 但是文章中无法链接图片，排查来了好久也没解决，未来再解决吧。（2022.6.19已解决）

第一次网站搭建流程 2021

根据视频教程进行操作b站教程

  1. 终端内安装宝塔软件

    • 宝塔Linux安装网址
    • 注意：不能安装在docker中，只能安装在本地
    • Ubuntu安装脚本 wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh 6dca892c
    • 安装成功

  2. 设置安全组，开放服务器8888端口

  3. 登录外网面板地址，按照视频教程进行操作

    • 如果提示不能添加站点，则在面板软件商城中卸载重新安装Nginx

    • image-20211225175458375

    • 修改/www/wwwroot/你的网站域名里面index.html

    • <!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>圣诞快乐</title>
    <style>
        .container {
            width: 60%;
            margin: 10% auto 0;
            background-color: #f0f0f0;
            padding: 2% 5%;
            border-radius: 10px
        }
     
        ul {
            padding-left: 20px;
        }
     
            ul li {
                line-height: 2.3
            }
     
        a {
            color: #20a53a
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>圣诞节快乐！</h1>
        <h3>来自皓清的祝福</h3>
        <ul>
            <li>如果可以，我只要一杯清水，一片面包，一枝花。</li>
        </ul>
    </div>
</body>
</html>

    • 最终还是因为配置问题宣告网站搭建失败，搞了一晚上，没找到原因，先放弃了

      • Nginx可以读取index.html文件，但是替换成index.php后提示403拒绝，导致wordpress无法安装
      • 怀疑是php配置或者未正常运行，不能执行.php的问题，由于重装了Nginx，也可能Nginx的问题
      • 回忆当时按照宝塔的一键安装，同时安装了Nginx，php等5个软件，但是后面新建站点时提示Nginx错误，然后自己就重新安装了Nginx，问题可能出现在这里，自己没有重新配置（但确实不懂）
      • 由于自己不走后端这条路，且个人网站也非必需品，所以先搁置。
      • 再附几个图
      • 在Nginx路径中image-20211225215024974
      • 错误日志为
        • image-20211225215339692
      • 可能是这里的配置问题
        • image-20211225215040594
      • 其中nginx.conf中的一段内容有嫌疑
        • image-20211225215257498

附

  1. 宝塔命令

    • 执行命令要加sudo权限
搜索