I’ve been thinking about starting my own personal blog for so long, but I finally started recently. So keep a complete note, if you happen to have the same need, then this article should help you.

To prepare

  1. Cloud server
  2. Personal domain name

If you don’t have a cloud server, running the application on your computer and penetrating it through the Intranet can probably achieve the effect, but personal computers are not stable at all, in case of power outage or Internet failure. So, a cloud server is still necessary.

If you don’t have a personal domain name, you can access it directly via IP, but it’s not friendly, and knowing the IP means you can’t switch servers. For example, if you want to move the server from the mainland to Hong Kong, from Ali cloud to Huawei cloud, all the original access connections will be invalid, and if you have a domain name, change the DNS. So, a domain name is still very necessary.

So let’s just do the cost

  • Cloud server: 24-60 per month

    • Aliyun Hong Kong Lightweight server Basic edition: 24/ month

      • Cheap, need not put on record, but inland visit speed will be a little slow

    • Aliyun Beijing Lightweight server Basic edition: 60/ month

      • Need to record, but access speed is fast. 60 is not expensive.

  • Domain name:.com suffix, 60 per year

Start the

Blog system has chosen the current more mature wordpress, after all, it takes too much time to build a from scratch.

Construction method choose to use docker container, this is for the later migration consideration, using docker can directly copy the file can go. After all, it is their own money to buy a server, where is naturally more preferential where to go.

In addition, nginx is also used to proxy the container, which is convenient for future extensions, such as adding a secondary domain name project. At the same time, nginx can only open the background address to the specified IP address, which can improve website security.

The resulting docker-Composer file can be accessed at github.com/hujingnb/do… For download, more will not post out. It’s almost out of the box, and when you see the following page, you’ve done the first step:

I stepped into a lot of holes to match this Nginx proxy.

If you need to change the cloud service instance, directly download the docker-Composer folder, and then upload to a new server to restart the line, data will not lose, is not very convenient.

personalized

Change the skin

Go pick a skin you like and customize it to fit you. There are a lot of free ones out there, but you can either pay for them or implement them yourself.

Recommend a few free, feel good, can try:

  • generatepress
  • Period
  • Allium
  • kratos
  • Twenty Twelve

Here in the selection of a site, but also need to adjust the page, layout, elements and so on, but also more time-consuming.

Support the markdown

Install the plugin WP Githuber MD, the interface is as follows, feel good:

Add article directories

Displays the article table of contents. Two plug-ins are mentioned here.

Rich Table of Contents

On the plus side, beautiful. But its directory is inserted by default under the third heading of the Markdown build file, and the page’s title anchor is disabled when the plug-in is enabled.

Easy Table of Contents,

The identification is fine, and so is markdown’s title anchor, so you can study how to customize the style perfectly.

Message board

Here we do not need how lofty, just need to create a new page, you can leave a message on this page. The next step is to hang the page on the home menu and add a portal. This is what it looks like:

Custom code

When searching for solutions, you need to customize your methods. If I change the theme, all the previous Settings will be invalid and I need to reset them again.

This can be done with a plug-in: Code Snippets

After that, all of your custom snippets can be put here, and you don’t have to worry about missing theme changes. The interface after installation:

Don’t rush to use it, don’t even rush to dress it, wait for you to use it, and then come back to install it. However, adding a plug-in would cause database queries and slow down the response, so INSTEAD of using the plug-in, I chose to modify the code directly.

Email Sending Settings

If you want to receive web site information via email (comment messages, etc.), you need to configure the email server to send email.

The simplest way is to install the plugin: WP Mail SMTP. After the following is a bunch of configuration, need to pay attention to the point, the configuration of SMTP password, not your account password oh. It’s an authorization code, like the 126 mailbox I use, which is this thing

Once configured, an email will be sent to your administrator whenever new comments come in. And the email will directly give you a link to whether it is approved or not, just click on it, it is so sweet.

In addition, if you want to open the login registration function, also need email authentication.

Example Set asynchronous mail sending

The default mail sending mode is synchronous, but after my attempt, I found that sending mail synchronously will slow down the interface speed, especially my server is in Hong Kong, and the mail server uses mailbox 163, so I have to wait for a long time every time I post a comment, and even timed out directly without getting a response. After testing it, I was able to turn off email notifications for comments. It was obvious that sending emails was slowing down the interface. So I came up with the idea of making the mail send asynchronous, which freed up the interface.

After a search, found the Internet solutions, the original address: wordpress.stackexchange.com/questions/1… Change the sending of emails to asynchronous execution by executing a timed script.

But because I have installed SMTP plug-in, direct use of the site will report an error, how to do? Yes, I’ll just go ahead and modify the plugin, because I already have the code. Wp-content /plugins/wp-mail-smtp/ wp_mail_SMtp.php


      

// Asynchronously performs the mail sending operation, overwriting the mail sending method when the script is not currently used
if ( !defined( 'DOING_CRON') | |! DOING_CRON) {function wp_mail() {
        $args = func_get_args();
        // Add a random number here because wordpress will delete the same task within 10 minutes
        $args[] = mt_rand();
        // Add a scheduled task and run it in 5 seconds.
        wp_schedule_single_event( time() + 5.'cron_send_mail'.$args );
    }
    // If it is an interface, all the following operations will not be performed, and directly exit the plug-in entry
    return;
}

// The script sends the mail method
function example_cron_send_mail() {
    $args = func_get_args();
    // Remove the last random number added
    array_pop( $args );
		// If the last argument is 'content_type_html', change the content-type. This is a custom parameter
    // The content-type is changed for the mode interface, but not in the script, so reset it here
    $endParam = end($args);
    if($endParam= ='content_type_html'){
      add_filter('wp_mail_content_type'.function(){return 'text/html'; }); }// This method is a scheduled task executed by script
    // When scripting, wp_mail will not be modified, is the default operation to send mail
    call_user_func_array( 'wp_mail'.$args );
}
// Add a few more parameters to prevent additional parameters later
add_action( 'cron_send_mail'.'example_cron_send_mail'.10.10 );
Copy the code

The Cron Status Checker plug-in can be installed to test server script running. The plug-in can be used to check whether scheduled tasks are running on a daily basis, send email alerts if exceptions occur, or test manually.

Note here that the wordpress script is implemented by invoking the interface, because there is no problem accessing the domain name on the cloud service, but if you are debugging locally, directly accessing the domain name from the Docker container will not access the project interface. So here you map the domain name in the wordpress container to the host host. Modify the hosts file. Want to know the IP address of the host? Just ping host.docker.internal from the container.

The method used here directly modifies the plug-in code in a somewhat heavy-handed way. Also, after setting up, you’ll notice that the Settings menu on the left is missing, again because of the code we added. Want to take out only good, do not affect normal use nevertheless ha. Although it brings some problems, but for the sake of speed, it can be tolerated, and we will find a better solution later.

Set email response reminders

Since my site does not have the login and registration function enabled, how can I notify someone who replies to a message left on my site? Reminders via email.

Comment Reply Email Notification is directly installed using the plug-in

Once installed, there will be a check box in the comments section to check if you want to be notified, and the email address you fill in will be notified. Of course, the premise of using notification is that you have configured SMTP service, you can see the above mail sending Settings. By the way, in plug-in Settings, you can set this check box to be checked by default

By the way, we have changed the sending of email to asynchronous script execution, so we need to modify the source code of the plug-in, so that the script side can send HTML email correctly.

Update: wp-content/plugins/comment-reply-email-notification/cren_plugin.php Wp_mail ($email, $title, $body, ‘content_type_html’); For details on why this parameter is added, see Setting asynchronous mail sending. If you do not modify asynchronous mail sending, you do not need to use this parameter.

When someone responds to your comment, you’ll get an email like this:

I have to say, this reply is a bit crude. What do you want to change? Fine.

Directly modify email templates, template location: wp – the content/plugins/comment – reply – email notification/templates/cren/notification. PHP. Here’s how I modified it.

In order to facilitate everyone, I put the reply after I modify the style directly, this style source: www.ihewro.com/archives/46…

<div class="nui-fClear sR0"><br/>
  <table style="Width: 99.8%; Height: 99.8%.">
    <tbody>
    <tr>
      <td style="background:#FAFAFA">
        <div style="background-color:white; border-left: 2px solid #555555; box-shadow:0 1px 3px #AAAAAA; line-height:180%; padding:0 15px 12px; width:500px; margin:50px auto; color:#555555; Font-family :'Century Gothic','Trebuchet MS','Hiragino Sans GB', 'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif; font-size:12px;">
          <h2 style="border-bottom:1px solid #DDD; font-size:14px; font-weight:normal; padding:13px 0 10px 8px;"><span style="color: #f59200; font-weight: bold;">&gt; </span>You are in<a style="text-decoration:none; color: #f59200;" href="http://hujingnb.com">The smell of tobacco</a>The comments on the blog have been answered!</h2>
          <div style="padding:0 12px 0 12px; margin-top:18px">
            <p><? php echo $parent->comment_author; ? Word-wrap: break-word! Important; "> < p style =" max-width: 100%<a href="
       comment_post_ID) ? >"><? php echo get_the_title($parent->comment_post_ID) ? ></a>Comment on</p>
            <p style="background-color: #f5f5f5; border: 0px solid #DDD; padding: 10px 15px; margin:18px 0"><? php echo esc_html($parent->comment_content); ? ></p>
            <p><? php echo $comment->comment_author; ? > My reply to you is as follows:</p>
            <p style="background-color: #f5f5f5; border: 0px solid #DDD; padding: 10px 15px; margin:18px 0"><? php echo esc_html($comment->comment_content); ? ></p>
            <p>You can click<a style="text-decoration:none; color:#f59200" href="
       comment_ID) ? >">Click here to reply</a>Welcome to come again<a style="text-decoration:none; color:#f59200" href="http:// hujingnb.com">The smell of tobacco</a>.</p>
          </div>
        </div>
      </td>
    </tr>
    </tbody>
    </table>
  <br />
  <br />
</div>
Copy the code

Support search

WordPress didn’t do as well on its own, so it wanted to leverage the power of Google search. My goal was to have a button that would take me straight to Google search. I found it on the Internet. It’s either too complicated, or the effect is not satisfactory. For example, if the search term is “markdown”, go straight to the link:

https://www.google.com/search?q=markdown site:https//hujingnb.com

That’s it. That’s it. Finally, I decided to do it myself. Here is an example of a search box that uses the default topic directly

My idea is to simply take the HTML code for the search box, then block the search button click and fill it back in.

How do I get the code for this search box? Very simple, add the search box, page source down, remove the search box, get the page source, and then find different. Here’s the search box I got for the default topic:

<section id="search-4" class="widget widget_search">
  <form role="search"  method="get" class="search-form" action="http://localhost/">
    <label for="search-form-1">search&hellip;</label>
    <input type="search" id="search-form-1" class="search-field" value="" name="s" />
    <input type="submit" class="search-submit" value="Search" />
</form>
</section>
Copy the code

Give it a simple makeover:

<section id="search-4" class="widget widget_search">
<form role="search"  method="get" class="search-form" action="http://localhost/">
	<label for="search-form-1">search&hellip;</label>
	<input type="search" id="search-form-1" class="search-field" value="" name="s" />
	<input type="submit" class="search-submit" id='search-googld' value="Search"/>
</form>
</section>
<script>
  window.document.getElementById('search-googld').onclick = function (e){
    var searchValue = document.getElementById('search-form-1').value;
    window.location.href = 'https://www.google.com/search?q=' + searchValue + ' site:https://www.cnblogs.com/hujingnb/';
    e.preventDefault();
  };
</script>
Copy the code

Ok, now we can delete the original search box and add our custom search box.

Also, if you use other themes, you can do the same thing. This way, when you click on search, the current page redirects to Google search, which I think is good enough.

You can then register with baidu and Google’s index console to see the information that sites are included and submit index suggestions.

Baidu index address: ziyuan.baidu.com/property/in…

Google Index: search.google.com/search-cons…

Modify the footer identifier

The default footer identifier is as follows:

I need to make custom changes here, I want to remove the build in XXX, if there is information about the case, you can also add it here.

/wp-content/themes/ themes/ functions.php/plugins/plugins /functions.php/plugins/plugins/plugins/plugins/plugins/plugins/plugins/plugins/plugins/plugins/plugins/plugins/plugins/plugins/plugins/plugins/plugins Custom code

/* Change the copyright information below the homepage */
add_action('after_setup_theme'.'generate_copyright_remove_default_message');
function generate_copyright_remove_default_message()
{

        remove_action( 'generate_credits'.'generate_add_footer_info' );
        remove_action( 'generate_copyright_line'.'generate_add_login_attribution' );
}

/**
 * Add the custom copyright
 * @since0.1 * /
add_action('generate_credits'.'generate_copyright_add_custom_message');
function generate_copyright_add_custom_message()
{
? >
        Copyright &copy; 
       echo date("Y") ? > <a href="https://hujingnb.com"< p style = "max-width: 100%; clear: both; min-height: 1em;
      
}
Copy the code

The results are as follows:

Access statistics

Some topics already support adding statistical code. But some of them are unsupported. What about them? Two methods.

1. Install the plug-in

Install Tracking Code, a plug-in that adds HTML Code to the header or tail of the entire site. Simple and convenient.

2. Modify the theme

Go to the./wp-content/themes/ theme name folder where the theme name is the theme you are using. Modify the footer. PHP file. This file is the footer.

What? Where can I find the statistical code? Baidu statistics, Google statistics and so on.

HTTPS set

After all, the message that HTTP is not secure when accessing Chrome is annoying. Aliyun individuals can apply for SSL certificates free of charge, address

After application, 20 accounts can be created for each account. The period is one year and you can reapply after one year.

After applying, upload the certificate to your cloud server. I put the HTTPS version of the nginx configuration file in git project, then change the value of the domain name in it. And don’t forget to open port 443 on your cloud server.

The last

If you are here, I believe you have successfully set up a small site, and finally, don’t forget to add your server and domain name automatic renewal oh.

Finally finally, take a look at my whole small broken station for a long time: