Site building tutorial from 0

Write in front

I planned to write a website building tutorial a long time ago. As the end of the term has been delayed until now, the memory of website building has also been blurred because of the test points. However, I try to build a website step by step from 0 and solve the problems.

Final results: https://jy741.cn/

If you think you want one if you like it, please keep looking down

Article content may be more, it is recommended to view according to the directory index.

Preparation for station construction

There is no difficulty in building a website itself. After all, the cost of building a website is very low, but the supporting things are a little cumbersome. Let's prepare what we need first:

ECs, domain name

1. Purchase server

Tencent cloud used by bloggers Purchase link , the experience is not bad. After all, we are used to TX's industry chain to log in (QQ, WX), and alicloud is also good. Both of them have discounts for students, only 10 yuan per month. Here is the latest Tencent cloud Star sea SA2 cloud server Love is as like as two peas in the first year. 95, the brother who likes the price ratio tries it for me first. 🧐.

Of course, this is a domestic server to be recorded and the server can only be recorded after three months of purchase. It's important to remember that you can only record a server purchased for three months at a time.

As for the initial server system, we can select the latest version of CentOs. As for account password, it is better to let the browser remember to make a convenient call later.

2. Purchase domain name

There's no big problem with domain names here. I think you can buy them directly (many cheap domain names) at the right price. Like me, it's about 20 this year. Remember! If you don't buy a. COM domain name, you must see what the registered domain name is. B ecause if someone enters the domain name (such as jy741) into the browser by default, the default is the. COM domain bound website. At that time, the blogger was trapped, such as my jy741.cn. I found out after I bought it. MD, jy741.com is an H-net 😵 I really!! Gan!!!

3. Website filing

If you want the domain name to be associated with the server and displayed to the public, you must record the real name website. Here is Tencent cloud's filing method, which is similar to Alibaba.

Use wechat to scan the QR code on it and follow the operation step by step. When taking a front photo, remember to take off your glasses and cut your hair as long as you remember (when I filed the result of the epidemic, I didn't cut my hair, he always said that the photo didn't meet the specifications 😥 ). It will take almost two or three days to finish.

After passing, I will send you a text message to remind you of your next operation - Public Security Filing. See Tencent cloud for details Process help , this operation must be completed within 30 days

4. Install the pagoda panel

Before installing the pagoda panel, make sure your system is pure (the one you just bought must be pure). If you use other one click installation before, it is recommended to reinstall the system as Centos7 system.

Because we use Tencent cloud, we need to open specific ports to facilitate the normal operation and installation of pagoda panel. Here refer to the official pagoda course To configure security groups.

After that, we enter the server, click login, enter the account password and enter the command line

Enter the following command:

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh 6dca892c

Wait until the installation is completed. After the installation is successful, you will be prompted to access the web address, user name and password:

Be sure to save these information. Later management needs to use this information login panel

5. Install the website environment

After the pagoda panel is installed, we can log in to the background panel and log in with the background address just recorded. After entering the pagoda panel successfully, you will be prompted to install LNMP running environment

LNMP is Nginx, MySQL and PHP, which are necessary to run WordPress programs. It is recommended to use PHP7 or above, and others can be maintained by default. It is recommended to use compile and install, wait patiently, and check the progress in the upper left corner.

Set up WordPress website

1. Server new site

Now that all the environments have been set up, we can start to build a website. Select the website on the pagoda panel, and click the green button in the figure below to create a new website.

Here you need to enter our domain name, and fill in both the ones without WWW and those with WWW, such as jy741.cn and www.jy741.cn , this step is to bind the domain name. FTP can not be created or used later. The database must be created and used after recording these information.

Click Submit, you will be prompted that the site was created successfully, and the database user name and password will be displayed. Here, you can view it again in the database management interface of pagoda without deliberately recording.

2. Domain name resolution

In fact, this is very simple. It is to add the ip address of domain name resolution so that the domain name can be resolved to the server. Different domain name providers operate in different ways. Here I will show Tencent cloud domain name resolution.

Find the required domain name in domain name management and click resolve

Every official here has a detailed introduction. I'll put one that I've completed for your reference

After setting up the resolution, wait for ten minutes, and then visit the web page to see a page created successfully, which proves that the resolution is ready for the next step.

3. Download WordPress

reach WordPress official website in Chinese Download the latest Chinese installation package, be sure to select tar.gz format

After downloading, you don't need to decompress, just keep the installation package. Next, we need to upload the downloaded installation package to the server. Because we have the pagoda panel, it's very convenient to upload, and we don't need a third-party tool. We can find the file management interface in pagoda panel, and then find the corresponding directory of the website. The directory of pagoda panel is usually fixed. For example, the directory I just created is / www/wwwroot/jy741.cn /. Generally, when pagoda panel is installed, it is under this / www/wwwroot directory if you haven't modified it.

Enter this directory and you will see the following file list. This is the default home page and 404 page when pagoda creates a site. Just delete,. htaccess and user.ini If you don't understand, don't move.

After the upload is successful, we can use the decompression provided by the pagoda to directly click decompression

After decompression, we will get a wordpress folder, enter the wordpress directory, select all files, click Copy or cut, and then return to the site directory, select paste all, your site directory must look like this:

After that, you can delete the WordPress directory and the WordPress package, which is now useless. Now you are ready to install WordPress.

4. Install WordPress

After there are no problems with domain name resolution and website program directory structure, we can install the website. The installation is the simplest

If you directly visit your domain name, you will see the wordpress installation interface. What it says is that we are ready in the early stage. The first step can be started directly

The server database information is filled in here, including database name, user name, password, database host, table prefix. If there is no special requirement for database host and table prefix, it generally does not need to be modified. Database password has just been written down by us, and can be filled in as required (please do not confuse with server user name and password)

It doesn't matter if you haven't recorded the database information before, you can go to the pagoda panel - database to view the information.

After filling in the database information, click Submit. The next step is to install WordPress

Fill in your own website information. It's better to find a place to write down your user name and password. This is the account password you need to log in to WordPress. You must fill in your own email to retrieve the password. In addition, if there is a message review problem on the website, you will also be sent an email.

After all is filled in, it will be installed automatically and wait.

After completion, you can choose to log in or enter your domain name or public IP in the browser. The wordpress page indicates that the site has been successfully built.

5. Set pseudo static and fixed links

This step is particularly important. Setting the pseudo static and fixed links correctly can ensure that the website is visited normally. The order must not be wrong. First set the pseudo static rules in the pagoda, and then set the WordPress fixed links. Otherwise, any page other than the home page may not be visited.

5.1 setting pseudo static rules

Open the pagoda panel, find your site, click settings, find pseudo static, select WordPress

5.2 set fixed link

Enter the WordPress background management interface and find the settings fixed link. We use the custom structure and the article ID as the link address.

Sakurairo🌸

Sakurairo, the theme of WordPress, is a more powerful theme than the original Sakura theme. It is also a fan of Sakura theme Hitomi make. The biggest highlight of this theme is to customize Sakura theme color more carefully, add many small functions, and build multiple tones, one click to switch theme style.

1. Download and install

Theme GitHub download station: https://github.com/mirai-mamori/Sakurairo

Download the package:

Upload and download the compressed package in wordpress background appearance - > Theme

Enable Sakurairo theme after installation. If we type in the domain name again, we will see a big change in appearance.

2. Foundation beautification

Next, we can easily beautify a lot of content by entering the theme setting.

This part of the basic instructions, relatively simple, self-study will be able to come up with their own desired effect. Because everyone's aesthetic is different, I will not repeat it too much here.

3. Top navigation bar

Adding and editing the top navigation bar is actually the basic use of wordpress. It is a universal function of wordpress. It is set in the appearance menu:

At the beginning of creation, you may only have text, but there is no icon in front of you. Here's how to add an icon:

Add to navigation tab Fontawesome The css theme has been introduced. You can directly copy the label

I know you're not satisfied, so add dynamic effects~

We need to use this website Font Awesome Animation

Then find the icon you want and the animation you want, continue to modify the background appearance menu, and fill in the title

4. Friend chain setting

In fact, the friend chain is the function of the theme itself, but the theme document does not elaborate. Many people are new to wordpress and are not familiar with it, so it is easy to find it. To open a friend chain page, first click the page in wordpress background, then create a new page, and select the links template in the page properties.

To have content in the friend chain, we need to add a friend chain to the link, as shown in the following figure:

In addition, you can set profile, group and personal portrait, which will be displayed on the page. Visit the friend chain page again to see the effect:

Then follow the previous navigation bar tutorial and add this to the navigation bar

Other templates such as timeline, tracking page, article page, and talking about page are all similar steps (the template has been given, as long as the title and part of the text description are enough).

5. White cat same Kanban

In the theme / WP content / themes / sakurairo directory

footer.php Add the following js tag

<script src="https://cdn.jsdelivr.net/gh/yremp/live2d@2.0/autoload.js"></script>

Save and update the following file to see the effect:

6. About botui automatic conversation

There is an automatic dialogue robot on the page of white cat, which is still very interesting. Let's introduce it to you. This is a revised tutorial, which is much simpler.

First, create a new "about" page and add an html block according to the steps in the figure

Add the following code to the custom html: (some are modified according to your own needs)

<div class="entry-content">
  <div class="moe-mashiro" style="text-align:center; font-size: 50px; margin-bottom: 20px;">[さくらA kind ofのWhite cat]</div>
  <div id="hello-mashiro" class="popcontainer" style="min-height: 300px; padding: 2px 6px 4px; background-color: rgba(242, 242, 242, 0.5); border-radius: 10px;">
    <center>
    <p>
    </p>
    <h4>
    And <ruby>
    Mashiro <rp>
    (</rp>
    <rt>
    True(ま)White(しろ)</rt>
    <rp>
    )</rp>
    </ruby>
    In conversation...</h4>
    <p>
    </p>
    </center>
    <bot-ui></botui>
  </div>
</div>
<script src="/wp-content/themes/Sakura-master/js/botui.js"></script>
<script>
bot_ui_ini()
</script>

then download js file, put it here

Then open this page to view the effect:

7. Dynamic verse on message page

Find the style.css File, add the following CSS code at the bottom

/*poetry*/
.poem-wrap {
    position: relative;
    width: 730px;
    max-width: 80%;
    border: 2px solid #797979;
    border-top: none;
    text-align: center;
    margin: 80px auto;
}
 
.poem-wrap h1 {
    position: relative;
    margin-top: -20px;
    display: inline-block;
    letter-spacing: 4px;
    color: #797979
}
 
.poem-wrap p {
    width: 70%;
    margin: auto;
    line-height: 30px;
    color: #797979;
}
 
.poem-wrap p#poem {
    font-size: 25px;
}
 
.poem-wrap p#info {
    font-size: 15px;
    margin: 15px auto;
}
 
.poem-border {
    position: absolute;
    height: 2px;
    width: 27%;
    background-color: #797979;
}
 
.poem-right {
    right: 0;
}
 
.poem-left {
    left: 0;
}
 
@media (max-width: 685px) {
    .poem-border {
        width: 18%;
    }
}
 
@media (max-width: 500px) {
    .poem-wrap {
        margin-top: 60px;
        margin-bottom: 20px;
        border-top: 2px solid #797979;
    }
 
    .poem-wrap h1 {
        margin: 20px 6px;
    }
 
    .poem-border {
        display: none;
    }
}

Modify JS / Sakura under Sakura topic directory- app.js File, find about line 10

mashiro_global.ini = new function () {
    this.normalize = function () { // initial functions when page first load
        lazyload();
        social_share();
        post_list_show_animation();
        copy_code_block();
        //Initial loading of poetry
        if ($("div").hasClass("poem-wrap")) {
            get_poem('#poem', '#info')
        }
        coverVideoIni();
        checkskinSecter();
        scrollBar();
    }
    this.pjax = function () { // Ajax reload functions
        pjaxInit();
        social_share();
        post_list_show_animation();
        copy_code_block();
        //Poetry overload
        if ($("div").hasClass("poem-wrap")) {
            get_poem('#poem', '#info')
        }
        coverVideoIni();
        checkskinSecter();
    }
}

Then add the following code at the bottom of this file

/*poetry*/
function get_poem(poem_ele, info_ele) {
    var poem = document.querySelector(poem_ele);
    var info = document.querySelector(info_ele);
    var xhr = new XMLHttpRequest();
    xhr.open('get', 'https://v2.jinrishici.com/one.json');
    xhr.withCredentials = true;
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            var data = JSON.parse(xhr.responseText);
            poem.innerHTML = data.data.content;
            info.innerHTML = '[' + data.data.origin.dynasty + ']' + data.data.origin.author + '<' + data.data.origin.title + '>';
        }
    };
    xhr.send();
}

Finally, create a new page template in WordPress and select the default template. Fill in the following code in the content

<div class="poem-wrap">
    <div class="poem-border poem-left"></div>
    <div class="poem-border poem-right"></div>
    <h1>Read two poems</h1>
    <p id="poem">Under selection...</p>
    <p id="info">
</div>

Completion effect

8. Reminders of outdated articles

Some of the tutorials and methods may fail due to "disrepair". The article we wrote a year or two ago may be useless now. So I'd like to add a "may have failed" tip to these old articles that may have failed. This is also a kind of responsibility to the readers.

Add the following code to the downloaded function.php Just.

For example, the blogger plans to update the reminder once a month, which means that it has not been updated for more than 1 month, and it has not been updated for more than 2 months And so on. The code is as follows:

//Monthly reminders post out of date reminders
function old_content_message($content)
{
    $modified = get_the_modified_time('U');
    $current = current_time('timestamp');
    $diffTime = ($current - $modified) / (60 * 60 * 24);
    if ($diffTime > 30 && $diffTime <= 60) {
        $content = '<div class="warn">This article is updated at the end of' . get_the_modified_time('Y year n month j day') .
            ',It has not been updated for more than 1 month!</div>' . $content;
    } elseif ($diffTime > 60  && $diffTime <= 90) {
        $content = '<div class="warn">This article is updated at the end of' . get_the_modified_time('Y year n month j day') .
            ',It has not been updated for more than 2 months!</div>' . $content;
    } elseif ($diffTime > 90  && $diffTime <= 120) {
        $content = '<div class="warn">This article is updated at the end of' . get_the_modified_time('Y year n month j day') .
            ',It has not been updated for more than 3 months!</div>' . $content;
    } elseif ($diffTime > 120  && $diffTime <= 150) {
        $content = '<div class="warn">This article is updated at the end of' . get_the_modified_time('Y year n month j day') .
            ',It has not been updated for more than 4 months!</div>' . $content;
    } elseif ($diffTime > 150  && $diffTime <= 181) {
        $content = '<div class="warn">This article is updated at the end of' . get_the_modified_time('Y year n month j day') .
            ',It has not been updated for more than 5 months!</div>' . $content;
    } elseif ($diffTime > 181  && $diffTime <= 212) {
        $content = '<div class="warn">This article is updated at the end of' . get_the_modified_time('Y year n month j day') .
            ',It has not been updated for more than 6 months!</div>' . $content;
    } elseif ($diffTime > 212  && $diffTime <= 243) {
        $content = '<div class="warn">This article is updated at the end of' . get_the_modified_time('Y year n month j day') .
            ',It has not been updated for more than 7 months!</div>' . $content;
    } elseif ($diffTime > 212  && $diffTime <= 243) {
        $content = '<div class="warn">This article is updated at the end of' . get_the_modified_time('Y year n month j day') .
            ',It has not been updated for more than 8 months!</div>' . $content;
    } elseif ($diffTime > 243  && $diffTime <= 274) {
        $content = '<div class="warn">This article is updated at the end of' . get_the_modified_time('Y year n month j day') .
            ',It has not been updated for more than 9 months!</div>' . $content;
    } elseif ($diffTime > 274  && $diffTime <= 305) {
        $content = '<div class="warn">This article is updated at the end of' . get_the_modified_time('Y year n month j day') .
            ',It has not been updated for more than 10 months!</div>' . $content;
    } elseif ($diffTime > 305  && $diffTime <= 335) {
        $content = '<div class="warn">This article is updated at the end of' . get_the_modified_time('Y year n month j day') .
            ',It has not been updated for more than 11 months!</div>' . $content;
    } elseif ($diffTime > 335  && $diffTime <= 365) {
        $content = '<div class="warn">This article is updated at the end of' . get_the_modified_time('Y year n month j day') .
            ',It has not been updated for more than 12 months! The content may be invalid, please test by yourself, please feedback in the comment area, thank you~</div>' . $content;
    } elseif ($diffTime > 365) {
        $content = '<div class="warn">This article is updated at the end of' . get_the_modified_time('Y year n month j day') .
            ',It has not been updated for more than 1 year! The content may be invalid, please test by yourself, please feedback in the comment area, thank you~</div>' . $content;
    }
    return $content;
}
add_filter('the_content', 'old_content_message')

"No update for a long time" prompt has been added, but the style is the same as the normal paragraph, so modify the prompt style

Just add this style to the custom CSS style in the theme settings

/*Article not updated for a long time warning*/
.warn{
    background: #ff953f;
    background: -webkit-gradient(linear,left top,right top,from(#ff953f),to(#ffb449));
    background: -webkit-linear-gradient(left,#ff953f,#ffb449);
    background: linear-gradient(90deg,#ff953f,#ffb449);
    text-shadow: 0 -1px #ff953f;
    -webkit-box-shadow: 0 3px 5px rgba(255,154,73,.5);
    box-shadow: 0 3px 5px rgba(255,154,73,.5);
    display: inline-block;
    color: #fff;
    font-size: 16px;
    padding: 15px;
    border-radius: 50px;
}
.warn:before {
    content: "? ";
}

9. Plug in Recommendation

In addition to the theme, the most important thing in WordPress is plug-ins. Plug ins can help us to achieve some specific functions, so that people who don't understand the code can also add functions to the website, so as to avoid spending time and money on secondary development. Here are some plug-ins I am using.

Hermit X , music player based on Aplayer, supporting multiple music platforms and local music.

Yoast SEO , search engine optimization.

WP Editor.md , article Markdown editor.

External Media without Import , the media library supports image outside the chain.

WP Super Cache , page caching, automatically generate cached pages for visitors, and improve access speed.

Autoptimize , page compression.

WP-China-Yes , which is equivalent to turning over a wall. You can't directly access the plug-ins in the theme store without this

10. Article skills

Add index: [toc] label anywhere

Capitalize the first letter of the article: just add [begin]]

11. Reference course

https://yremp.live/wordpress-sakura-teach/

https://m1314.cn/

https://asuhe.jp/daily/sakurairo-user-manual/

epilogue

This article may still have some shortcomings or mistakes. Welcome to give feedback and correction. This blog will be updated if it is beautified. If you like, please like it and go

Tags: Database PHP github Ruby

Posted on Tue, 23 Jun 2020 00:47:33 -0400 by FredAt