• 【个人实验报告】博客网站

    目录

    项目名称

    个人实验目标

    完成情况

    项目主要内容

    1.任务完成情况：

    2.项目目标实现情况：

    3.项目经验总结：

    4.存在的不足或欠缺：

    个人在项目实施阶段所学习的内容：

    个人在研发过程中的经验与心得：

    个人在项目中的研发内容与成功：

    项目名称

    个人博客网站

    个人实验目标

    服务器，域名的购买，前端博客网站的搭建，更新博文并成功上线算法博客网站

    完成情况

    阿里云服务器和域名已经购买，前端博客网站已经基本搭建完成，实现了博客文章从个人CSDN迁移到个人博客网站，目前已经完成了网站的备案并且成功上线该网站，网站的域名：y-x.icu，欢迎来指点一二！

    【温馨提示：请用手机的PC版浏览器输入域名：y-x.icu进入网站，非PC版浏览器打开页面的布局会很奇怪】

    项目主要内容

    购买一台配置为2核2G，镜像为CentOS 8.2的轻量级阿里云服务器，使用宝塔面板对云服务器进行管理，通过X-Shell实现远程登陆服务器。购买y-x.icu域名，并对网站进行备案，上线网站的前期准备工作就已经完成了。关于具体的实现流程已经记录在个人的CSDN博客上

    建站前期工作请看这篇文章👉🏻建站三大件👈🏻

    网站的内容是基于docsify框架开发的，首先安装docsify-cli脚手架，用于初始化docsify项目，然后通过命令行运行一个本地服务器，打开一个3000端口用于运行该项目。本地编译器使用的是VScode，编程语言是HTML、JavaScript、CSS，博客内容采用Markdowm的格式编写。

    部分代码如下所示： 

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <title>-小羊不会飞的博客-</title>
    7.  
    8.   <!-- 解除其他平台的防盗链 -->
    9.   <meta name="referrer" content="never">
    10.  
    11.   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    12.   <meta name="description" content="Description">
    13.   <meta name="viewport"
    14.     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    15.   <!-- 原始皮肤 -->
    16.   <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">
    17.  
    18.   <!-- 黑皮 -->          
    19.   <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple-dark.css"> -->
    20.  
    21.   <link rel="stylesheet" type="text/css" href="style/myStyle.css" />
    22.  
    23.   <!-- alert -->
    24.   <link rel="stylesheet" href="//cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" type='text/css' media='all' />
    25.  
    26. </head>
    27.  
    28. <body background="" style=" background-repeat:no-repeat ;background-size:100% 100%;background-attachment: fixed;">
    29.  
    30.   <div id="app">Loading...</div>
    31.   <a class="to-top">置顶</a>
    32.  
    33.   <script>
    34.     window.$docsify = {
    35.       el: '#app',
    36.       name: '技术博客',
    37.       repo: 'https://github.com/mochazi/docsify-demo',
    38.       loadNavbar: true, //开启导航栏
    39.       coverpage: true,  //开启封面
    40.       loadSidebar: true,//开启侧边栏
    41.       auto2top: true,   //切换页面自动回到顶部
    42.       subMaxLevel: 2,   //目录最大级数
    43.       maxLevel: 4,      //可配置最大支持渲染的标题层级
    44.       homepage: 'zh-cn/README.md', //设置中文的README.md作为首页
    45.  
    46.       //添加搜索功能，中文和英文文档同时搜索
    47.       search: {
    48.         paths: 'auto',
    49.         placeholder: {
    50.           '/': '🔍 请输入关键字',
    51.           '/zh-cn/': '🔍 搜索',
    52.           '/en-us/': '🔍 Type to search'
    53.         },
    54.         //如果中文和英文文档都没有内容，则返回
    55.         noData: {
    56.           '/': '😒 快别搜了，您搜不到的',
    57.           '/zh-cn/': '😒 快别搜了，您搜不到的',
    58.           '/en-us/': '😒 Stop searching,you can’t find it'
    59.         },
    60.  
    61.         depth: 4,         //搜索标题的最大层级
    62.         maxAge: 86400000, // 过期时间，单位毫秒，默认一天
    63.       },//增加搜索框
    64.  
    65.       footer: {
    66.         copy: 'Copyright &copy; 2022 💖 </span>',
    67.         auth: ' <strong>-小羊不会飞-</strong>',
    68.         pre: '<hr/>',
    69.         style: 'text-align: center;',
    70.       },
    71.  
    72.       copyCode: {
    73.         buttonText: 'Copy',
    74.         errorText: 'Error',
    75.         successText: 'OK!'
    76.       },
    77.  
    78.       'flexible-alerts': {
    79.         style: 'flat'
    80.       }
    81.  
    82.     }
    83.   </script>
    84.  
    85.   <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
    86.  
    87.   <!-- docsify表情包 -->
    88.   <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>
    89.  
    90.   <!-- 复制代码到剪切板 -->
    91.   <script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
    92.  
    93.   <!-- 搜索功能 -->
    94.   <script src="//cdn.bootcss.com/docsify/4.5.9/plugins/search.min.js"></script>
    95.  
    96.   <!-- C++、Java、python、bash等等语法高亮 -->
    97.   <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-bash.min.js"></script>
    98.   <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-java.min.js"></script>
    99.   <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-python.min.js"></script>
    100.   <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-cpp.min.js"></script>
    101.   <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-c.min.js"></script>
    102.   <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-javascript.min.js"></script>
    103.   <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-css.min.js"></script>
    104.   <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-powershell.min.js"></script>
    105.   <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-sql.min.js"></script>
    106.   <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-yaml.min.js"></script>
    107.   <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-properties.min.js"></script>
    108.   <script src="//cdn.jsdelivr.net/npm/prismjs/components/matlab.min.js"></script>
    109.  
    110.   <!-- CDN files for docsify-katex -->
    111.   <script src="//cdn.jsdelivr.net/npm/docsify-katex@latest/dist/docsify-katex.js"></script>
    112.  
    113.   <!-- 文档页脚增强 -->
    114.   <script src="//cdn.jsdelivr.net/npm/docsify-footer-enh/dist/docsify-footer.min.js"></script>
    115.  
    116.   <!-- 复制提醒 -->
    117.   <script src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
    118.   <script>
    119.     document.body.oncopy = function () {
    120.       swal("复制成功 🎉",
    121.         "如果你觉得博客内容写的不错，那就来 CSDN 给个关注吧 😊",
    122.         "success");
    123.     };
    124.   </script>
    125.  
    126.   <!-- PWA 离线化 -->
    127.   <script>
    128.     if (typeof navigator.serviceWorker !== 'undefined') {
    129.       navigator.serviceWorker.register('sw.js')
    130.     }
    131.   </script>
    132.  
    133.   <!-- 访问量统计 -->
    134.   <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    135.  
    136.  
    137.   <!-- 字数统计 -->
    138.   <script src="//unpkg.com/docsify-count/dist/countable.js"></script>
    139.  
    140.  
    141.   <!-- 置顶插件 -->
    142.   <script src="style/jquery-1.11.3.min.js"></script>
    143.   <script src="style/jquery.toTop.min.js"></script>
    144.   <script>
    145.     $('.to-top').toTop();
    146.   </script>
    147.  
    148.   <!-- Markdown 引用样式美化 -->
    149.   <script
    150.     src="//cdn.jsdelivr.net/npm/docsify-plugin-flexible-alerts/dist/docsify-plugin-flexible-alerts.min.js"></script>
    151.  
    152.   <!-- 图片缩放 -->
    153.   <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.js"></script>
    154.  
    155.  
    156.   <!-- 评论 -->
    157.   <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.css">
    158.  
    159.   <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/gitalk.min.js"></script>
    160.   <script src="//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.js"></script>
    161.   <script>
    162.     const gitalk = new Gitalk({
    163.       clientID: '0c7d6a480e4d6609203c',
    164.       clientSecret: '1acb2db6da13907fbcf46523c7d1dfe272de42ba',
    165.       repo: 'docsify',
    166.       owner: '2454608763',
    167.       admin: ['2454608763'],
    168.       // facebook-like distraction free mode
    169.       distractionFreeMode: true
    170.     })
    171.   </script>
    172. </body>
    173.  
    174. </html>

    简介：博客网站的文章内容主要有“大学之路”，“蓝桥杯篇”，“软件安装篇”，“开源篇”，“ACM算法修炼”，“学习笔记”六个专栏，目前一共26篇博客文章供学习，后续会发布新的专栏和文章。左侧菜单栏添加了一个模糊搜索组件，可以通过关键字的搜索找到对应的文章，网站最底部申请了Github里的Gitalk接口用来实现评论功能，使用JavaScript实现复制内容立刻出现小弹框的功能，每一页博客的右上角添加了“字数统计”和“阅读时间”小组件，除此之外还有一些其它小组件用于美化整个网站。

     网站的内容展示如下图所示：

    1.任务完成情况：

    服务器，域名的购买，博客网站前端的搭建，更新博文并成功上线算法博客网站

    2.项目目标实现情况：

    服务器，域名的购买，博客网站前端的搭建，更新博文并成功上线算法博客网站

    3.项目经验总结：

    （1）知道如何利用宝塔面板搭建网站站点，并将域名与ip进行绑定

    （2）学会了服务器以及域名的购买，以及网站的备案全过程遇到问题并解决问题

    （3）在利用X-Shell远程登录阿里云服务器时遇到了很多问题，会充分利用搜索引擎和技术论坛来解决自己所遇到的问题

    （4）在网站正式上线之前，先在本地进行搭建和在自己的服务器上部署，先整理好思路再进行开发，会节约很多不必要的时间

    （5）在开发的过程中难免会遇到各种问题，我学会了沉下心解决一个个令人头疼的bug，通过这次作业不仅提升了我在开发时解决问题的能力，也锻炼了我的心态，更让我明白了“只有克服重重困难才能赢来胜利的曙光”的道理

    4.存在的不足或欠缺：

    （1）网站的内容除了博客文章外，还可以继续开发其它功能；

    （2）站点目前还未配置ssl证书；

    （3）博客文章的内容还不够全面，还需要丰富文章专栏的多样性

    个人在项目实施阶段所学习的内容：

    （1）前端三件套HTML、JavaScript、CSS
    （2）Markdown格式的文档编写

    个人在研发过程中的经验与心得：

    （1）知道如何利用宝塔面板搭建网站站点，并将域名与ip进行绑定

    （2）学会了服务器以及域名的购买，以及网站的备案全过程遇到问题并解决问题

    （3）在利用X-Shell远程登录阿里云服务器时遇到了很多问题，会充分利用搜索引擎和技术论坛来解决自己所遇到的问题

    （4）在网站正式上线之前，先在本地进行搭建和在自己的服务器上部署，先整理好思路再进行开发，会节约很多不必要的时间

    （5）开发的过程中难免会遇到各种问题，我学会了沉下心解决一个个令人头疼的bug，通过这次作业不仅提升了我在开发时解决问题的能力，也锻炼了我的心态，更让我明白了“只有克服重重困难才能赢来胜利的曙光”的道理

    （6）一个人开发的过程虽然很艰辛，但网站上线的那一刻真的成就感爆棚

    个人在项目中的研发内容与成功：

    （项目组成员仅作者一人）

    1. 服务器的购买
    2. 域名购买
    3. 网站开发
    4. 博客内容的撰写,博客更新并发布
    5. 网站备案
    6. 网站上线

    文章内容如有错误欢迎指正🥰

     

  • 相关阅读:
    （6）点云数据处理学习——RGBD图
    JVM调优工具锦囊：JDK自带工具与Arthas线上分析工具对比
    STC单片机20——DS1302可调电子时钟1602显示proteus仿真
    A_A01_002 MDK5（STM32）软件安装
    UE5 官方案例Lyra 全特性详解 9.蓝图消息系统
    计算机毕业设计ssm+vue基本微信小程序的好物推荐分享系统
    基于.NetCore开发博客项目 StarBlog - (17) 自动下载文章里的外部图片
    Day31|贪心算法1
    【数据结构】红黑树
    Springboot vue旅游资讯网站管理系统
  • 原文地址：https://blog.csdn.net/m0_55858611/article/details/125432364