当前位置：网站首页>[personal experiment report]

Alibaba cloud servers and domain names have been purchased , The front-end blog website has been basically built , Realized the blog article from the individual CSDN Migrate to a personal blog site , At present, the registration of the website has been completed and the website has been successfully launched , Domain name of the website ：y-x.icu, Welcome to give some advice ！
【 reminder ： Please use your mobile phone PC Enter the domain name in the browser ：y-x.icu Go to the website , Not PC The layout of the open page of the browser will be strange 】

Main contents of the project

Purchase one with the configuration of 2 nucleus 2G, Mirror as CentOS 8.2 Lightweight Alibaba cloud servers , Use the pagoda panel to manage ECs , adopt X-Shell Achieve remote login server . Buy y-x.icu domain name , And record the website , The preparatory work for launching the website has been completed . The specific implementation process has been recorded in the individual CSDN Blog
Please read this article about the preliminary work of the station Three major items for building the station
The content of the website is based on docsify Framework developed , First installation docsify-cli The scaffold , For initialization docsify project , Then run a local server from the command line , Open one 3000 Port is used to run the project . The local compiler uses VScode, The programming language is HTML、JavaScript、CSS, The blog content adopts Markdowm In the format of .

Part of the code is shown below ：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>- Lamb can't fly blog -</title>

  <!--  Remove the anti-theft chains of other platforms  -->
  <meta name="referrer" content="never">

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="Description">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <!--  Original skin  -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">

  <!--  Black skin  -->          
  <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/theme-simple-dark.css"> -->

  <link rel="stylesheet" type="text/css" href="style/myStyle.css" />

  <!-- alert -->
  <link rel="stylesheet" href="//cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" type='text/css' media='all' />

</head>

<body background="" style=" background-repeat:no-repeat ;background-size:100% 100%;background-attachment: fixed;">

  <div id="app">Loading...</div>
  <a class="to-top"> Roof placement </a>

  <script>
    window.$docsify = {
      el: '#app',
      name: ' Technology blogs ',
      repo: 'https://github.com/mochazi/docsify-demo',
      loadNavbar: true, // Open the navigation bar 
      coverpage: true,  // Open the cover 
      loadSidebar: true,// Open the sidebar 
      auto2top: true,   // Switch the page back to the top automatically 
      subMaxLevel: 2,   // The maximum number of levels in the directory 
      maxLevel: 4,      // Configurable Title level with maximum rendering support 
      homepage: 'zh-cn/README.md', // Set Chinese README.md As the home page 

      // Add search , Search Chinese and English documents at the same time 
      search: {
        paths: 'auto',
        placeholder: {
          '/': '  Please enter keywords ',
          '/zh-cn/': '  Search for ',
          '/en-us/': ' Type to search'
        },
        // If the Chinese and English documents have no content , Then return to 
        noData: {
          '/': '  Stop searching , You can't find it ',
          '/zh-cn/': '  Stop searching , You can't find it ',
          '/en-us/': ' Stop searching,you can’t find it'
        },

        depth: 4,         // Maximum level of search title 
        maxAge: 86400000, //  Expiration time , Unit millisecond , Default one day 
      },// Add search box 

      footer: {
        copy: 'Copyright &copy; 2022  </span>',
        auth: ' <strong>- Lambs can't fly -</strong>',
        pre: '<hr/>',
        style: 'text-align: center;',
      },

      copyCode: {
        buttonText: 'Copy',
        errorText: 'Error',
        successText: 'OK!'
      },

      'flexible-alerts': {
        style: 'flat'
      }

    }
  </script>

  <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>

  <!-- docsify emoticon  -->
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>

  <!--  Copy code to clipboard  -->
  <script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>

  <!--  Search function  -->
  <script src="//cdn.bootcss.com/docsify/4.5.9/plugins/search.min.js"></script>

  <!-- C++、Java、python、bash And so on  -->
  <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-bash.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-java.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-python.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-cpp.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-c.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-javascript.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-css.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-powershell.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-sql.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-yaml.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-properties.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs/components/matlab.min.js"></script>

  <!-- CDN files for docsify-katex -->
  <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/docsify-katex.js"></script>

  <!--  Document footer enhancements  -->
  <script src="//cdn.jsdelivr.net/npm/docsify-footer-enh/dist/docsify-footer.min.js"></script>

  <!--  Copy reminders  -->
  <script src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
  <script>
    document.body.oncopy = function () {
      swal(" Replication success  ",
        " If you think the content of the blog is good , Then come  CSDN  Pay attention to it  ",
        "success");
    };
  </script>

  <!-- PWA  Offline  -->
  <script>
    if (typeof navigator.serviceWorker !== 'undefined') {
      navigator.serviceWorker.register('sw.js')
    }
  </script>

  <!--  Traffic statistics  -->
  <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>


  <!--  Word count  -->
  <script src="//unpkg.com/docsify-count/dist/countable.js"></script>


  <!--  Top plug-in  -->
  <script src="style/jquery-1.11.3.min.js"></script>
  <script src="style/jquery.toTop.min.js"></script>
  <script>
    $('.to-top').toTop();
  </script>

  <!-- Markdown  Reference style beautification  -->
  <script
    src="//cdn.jsdelivr.net/npm/docsify-plugin-flexible-alerts/dist/docsify-plugin-flexible-alerts.min.js"></script>

  <!--  Picture zoom  -->
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.js"></script>


  <!--  Comment on  -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.css">

  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/gitalk.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.js"></script>
  <script>
    const gitalk = new Gitalk({
      clientID: '0c7d6a480e4d6609203c',
      clientSecret: '1acb2db6da13907fbcf46523c7d1dfe272de42ba',
      repo: 'docsify',
      owner: '2454608763',
      admin: ['2454608763'],
      // facebook-like distraction free mode
      distractionFreeMode: true
    })
  </script>
</body>

</html>

brief introduction ： The content of the blog website mainly includes “ University Road ”,“ Blue Bridge Cup ”,“ Software installation ”,“ Open source ”,“ACM Algorithm cultivation ”,“ Learning notes ” Six columns , At present, a total of 26 A blog post for learning , New columns and articles will be published later . A fuzzy search component has been added to the left menu bar , You can find the corresponding articles through keyword search , The bottom of the website has applied for Github Inside Gitalk Interface is used to implement the comment function , Use JavaScript Realize the function that the small pop-up box appears immediately after copying the content , In the top right corner of each page of the blog “ Word count ” and “ Reading time ” Small components , In addition, there are some other widgets used to beautify the entire site .

The content of the website is shown in the following figure ：

1. Mission completion ：

The server , Purchase of domain name , The construction of the front end of the blog website , Update the blog and successfully launch the algorithm blog website

2. Achievement of project objectives ：

The server , Purchase of domain name , The construction of the front end of the blog website , Update the blog and successfully launch the algorithm blog website

3. Project experience summary ：

（1） Know how to use the pagoda panel to build a website , And match the domain name with ip Binding
（2） Learned how to buy servers and domain names , As well as the problems encountered and solved in the whole process of website filing
（3） Using X-Shell There are many problems when logging in to Alibaba cloud servers remotely , Will make full use of search engines and technical forums to solve their own problems
（4） Before the official launch of the website , First, build locally and deploy on your own server , First sort out ideas and then develop , It will save a lot of unnecessary time
（5） It is inevitable to encounter various problems in the development process , I learned to settle down and solve the headache bug, This assignment not only improved my ability to solve problems during development , It also exercised my mentality , Let me understand “ Only by overcoming many difficulties can we win the dawn of victory ” The truth

4. An existing deficiency or deficiency ：

（1） The content of the website is in addition to blog posts , You can also continue to develop other functions ;
（2） The site is not currently configured ssl certificate ;
（3） The content of blog posts is not comprehensive enough , We also need to enrich the diversity of articles and columns

What individuals have learned during the project implementation stage ：

（1） Front three piece set HTML、JavaScript、CSS
（2）Markdown Format document writing

Personal experience and experience in the R & D process ：

（1） Know how to use the pagoda panel to build a website , And match the domain name with ip Binding
（2） Learned how to buy servers and domain names , As well as the problems encountered and solved in the whole process of website filing
（3） Using X-Shell There are many problems when logging in to Alibaba cloud servers remotely , Will make full use of search engines and technical forums to solve their own problems
（4） Before the official launch of the website , First, build locally and deploy on your own server , First sort out ideas and then develop , It will save a lot of unnecessary time
（5） It is inevitable to encounter various problems in the process of development , I learned to settle down and solve the headache bug, This assignment not only improved my ability to solve problems during development , It also exercised my mentality , Let me understand “ Only by overcoming many difficulties can we win the dawn of victory ” The truth
（6） Although the process of development by one person is very difficult , But the moment the website went online, it really felt a sense of accomplishment

Personal R & D content and success in the project ：

（ There is only one author in the project team ）
Purchase of servers
Domain name purchase
Website development
Writing blog content , Blog update and post
Website filing
The website goes online