My douban standin: WordPress + VPS site building tutorial

To complete this tutorial you will need:

  • ⏳ 2-3 days (piecing together all the bits of time)
  • 💰 $70~$100/yr server + domain name overhead
  • Know how to remotely connect to a Linux server and know some basic Linux operations
  • Determination, endurance and enthusiasm to build your own station

You can get:

  • A more refreshing personal blog, all data and functions by their own control
  • It can be remotely edited from the web side on multiple devices such as computer, tablet and mobile phone. The editor experience is similar to Douban, and Markdown is also supported
  • A server of your own (interesting things to do with it: what you can do with a VPS)

How to choose the site construction scheme

Too long to look at the version (each solution pain point, please find your own Deal Breaker) :

  • Notion / Tumblr
    • Not quite like a blog, and there’s no very effective way to do it
    • At risk of being walled up, or already walled up
  • wordpress.com
    • The site default template is ugly (but adjustable)
    • 💰 has three kinds of Plan, free version has advertising, 4/ MO can not install plug-ins, 4/ MO can not install plug-ins, 4/ MO can not install plug-ins, 20/ MO can be arbitrarily
  • wordpress.org + VPS
    • 💰 5−5-5−8/mo fixed cost
    • 🛠️ High technical difficulty in installation (see this article)
    • For more information on the differences between WordPress.com and WordPress.org, see this article: What kind of blogging solution do you really need
  • Hexo + GitHub Pages
    • Mobile and tablet editors don’t render in real time, making transferring images cumbersome
    • Computer editors must save and synchronize blog source code with Git, and hexo must be installed on every computer
    • The speed of domestic visits is unstable
    • 🛠️ The installation is difficult
  • write.as
    • All clients do not render in real time, it is very troublesome to upload
    • Extremely limited customization (you can’t even change the font size)
  • Blogger
    • The web editor is ugly, and there is no proper editor on the iPad

Repetitive version:

  • One-off construction cost (not a major consideration, as long as it is within the budget)

    wordpress.com wordpress.org+VPS Hexo + GitHub Pages write.as Blogger
    Time cost ~ 15 min 2-3 days 1 to 2 days ~ 15 min ~ 15 min
    The money cost Free (with ads) ~ $20/mo (plugin support) $5/mo VPS +
    10   10 ~     30 / yr domain name    		 free free free
    Privacy protection Collect email only Collect email only Collect email only Only collect mailbox, support anonymous Posting Collect email only
    Technical difficulties There is no Basic knowledge of Linux Basic knowledge of Linux and GitHub There is no There is no
    Non-technical difficulty Approximately equal to no Need to buy VPS and domain name DNS may need to communicate with customer service on both sides There is no There is no There is no

  • Long-term use experience (the main consideration. I personally value “multi-device editing” and “taking notes on the go”) :

    wordpress.com wordpress.org+VPS Hexo + GitHub Pages write.as Blogger
    Level of appearance Approximate to this site Approximate to this site NeXTThe king of physical appearance demoVery minimalism, Approximate to this site
    The mobile terminal App or web rich text editor App or web rich text editor Continuous integration +WorkingCopy, no instant rendering, illustration trouble App or web Markdown editing, no real-time rendering, need to map bed Rich text editor on web (it seems that there is no mobile adaptation, so the editing experience is not very good)
    The computer side Rich text or Markdown editor for web pages Rich text or Markdown editor for web pages After downloading the hexo source code, local Typora Markdown edited it Web Markdown editing, no real-time rendering, need to map bed Rich text editing on the web
    new A key new A key new Create a. Md file, save it with a name and add the yaml header A key new A key new
    Draft box Unpublished articles are automatically stored in the draft box Unpublished articles are automatically stored in the draft box There is no Can be published anonymously, can also save the draft Unpublished articles are automatically saved as drafts
    update Update immediately after editing Update immediately after editing There is a delay of ~ 10 minutes after editing Update immediately after editing Update immediately after editing
    The custom Complete plug-in system, $20/mo optional customization Complete plug-in system,
    5 – 5 –     6/ MO arbitrary customization, other services can be installed    		 Static pages, many plug-ins, can be customized but limited Can’t even adjust the font size… The plug-in system is inactive and customizable but limited

My site construction scheme: WordPress + VPS tutorial

🌏 Purchase VPS and domain | an asteroid

A Virtual Private Server (VPS) is a computer that runs 7 x 24 and never shuts down. When you enter a Domain Name (google.com, for example) in a browser, the DNS (Domain Name System, The domain name System (DNS) takes care of finding the computer, requesting web pages from it, and rendering the downloaded web pages to your browser (see Not just Blog – WordPress WordPress log for details).

My configuration:

  • VPS: Hostwinds Umanaged Linux VPS minimum, $4.99/mo, Ubuntu 18.04
  • Domain name: Namecheap, 10 ~ 10 ~ 10 ~ 30/yr (example.com)
  • DNS Settings:
    1. In the Nameserver section of the Namecheap, select Custom DNS and enter the Nameserver domain name provided by Hostwinds
    2. In Hostwinds A record (example.com and www.example.com), point both domains to the IP of the VPS

After this step, you should be able to SSH to your VPS terminal:

🏡 Install WordPress | Restaurants at the end of the Universe

In order to be able to deploy multiple services on one VPS, on one IP (for example, accessing service A via A.example.com and service B via b.example.com, both deployed on different ports on the same host), I did not do what most tutorials on the web do, Deploy wordpress directly on the default port 80, instead deploying it on my own custom port (such as 8080), and then use the Nginx reverse proxy to forward requests to port 80. The port switch is a bit of a hassle, but it’s necessary and worth it in order to get the most out of deploying multiple services.

This step mainly refers to the use of Nginx anti-generation implementation of Docker installation WordPress and other services coexist (by Cloud five, How To Install WordPress With Docker Compose (by DigitalOcean), There are a few changes based on these three chapters.

[To the above authors: If you think this article violates your copyright, please contact me and I will delete this article immediately]

Server Environment Configuration

So the first thing we need to do is log in as root, create a new user with sudo permission, and then do everything with that user:

export $UNAME=<username>
useradd $UNAME -m
usermod -s /bin/bash $UNAME
passwd $UNAME
chmod u+w /etc/sudoers
/etc/sudoers root ALL=(ALL:ALL) ALL
# <username> ALL=(ALL:ALL) ALL
chmod u-w /etc/sudoers
Copy the code

Log out of root, log in to the new user, and install some deployment libraries:

sudo apt install docker docker-compose
sudo apt install nginx
Copy the code

Allow new users to use Docker without using sudo:

sudo gpasswd -a $USER docker
Copy the code

(Optional) Enable The Google BBR congestion control algorithm to speed up site access:

sudo vim /etc/sysctl.conf
Copy the code

At the end of the file add:

net.core.default_qdisc=fq
net.ipv4.tcp_congestion_control=bbr
Copy the code

Then refresh:

sudo sysctl -p
# Test success
sysctl net.ipv4.tcp_congestion_control  
# should output `net.ipv4.tcp_congestion_control = bbr`
Copy the code

Install WordPress on port 80

Open a directory for the wordpress configuration file (I put ~/wordpress) and go to it:

# I packed up the configuration files mentioned in the tutorial and put them in a Github repository
git clone https://github.com/maskbot/wordpress.git
cd wordpress
Copy the code
  1. Change the domain name in the nginx configuration file to your own:
vi nginx-conf/nginx.conf
Copy the code

Replace all example.com with your own domain name.

  1. Create an environment variable file (used to set your MySQL database username and password, and the HTTP port used by wordpress) :
vim .env
Copy the code

Env (set the values of the first three items by yourself, you can set them as you like, don’t be too weak password) :

MYSQL_ROOT_PASSWORD=your_mysql_root_password
MYSQL_USER=your_wordpress_database_user
MYSQL_PASSWORD=your_wordpress_database_password
HTTP_PORT=80
Copy the code

Be aware that the.env file contains sensitive information, so be sure to avoid adding it to a Docker Container or uploading it to Github. In the clone Github repo above, I’ve added.dockerignore and.gitignore.

Your ~/wordpress directory should have the following structure:

.├ ─.├ ─ ├─.env ├─.├ ─ ├─ ├─ nginx-class ├─ nginx-classCopy the code

Finally, start the wordpress service! 🚀

Docker-compose ps can be used to check for success with the docker-compose ps command. If successful, you can see the following output (all states should be Up) :

Name Command State Ports ------------------------------------------------------------------------- db docker-entrypoint.sh --def ... Up 3306/tcp, 33060/tcp webserver /docker-entrypoint.sh ngin ... Up 0.0.0.0:80->80/ TCP wordpress docker-entrypoint.sh php-fpm Up 9000/ TCPCopy the code

Initialize the WordPress front-end

To change WordPress to a custom port, log in to the web user interface (WebUI) and perform initial Settings.

Compose up after the docker-compose up command in the previous step, wait for a few minutes (up to 10 minutes) to access example.com from the browser and view the WordPress WebUI, allowing you to set the language, email, password, and so on. After the Settings, log in to the wordpress management background page.

Once this step is complete, visit example.com again and it should display your blog home page.

Custom WordPress port

Now let’s move wordpress to a custom port (for me, port 8080).

First, stop the wordpress service:

docker-compose down
Copy the code

Then enter the. Env file and change the HTTP port to your custom value:

HTTP_PORT=8080
Copy the code

Then restart the wordpress service 🚀 :

docker-compose up -d
Copy the code

At this point example.com can no longer be accessed from the browser because the wordpress service has been moved to port 8080. Delete Permanently from the VPS terminal curl. Delete Permanently from the VPS terminal curl.

curl -v http://localhost:8080
Copy the code

Ok, now let’s set up a reverse proxy in nginx that forwards requests to port example.com 80 to port 8080 on your VPS:

cd /etc/nginx/sites-enabled/
sudo rm -rf default
cd /etc/nginx/sites-available/
sudo vi wordpress.conf
Copy the code

The contents of wordpress.conf (replace example.com with your own domain name) :

server {
    listen      80;
    listen [::]:80;
    server_name example.com;
    location / {
        proxy_set_header Host $host; Proxy_pass http://127.0.0.1:8080; }}Copy the code

Then open the reverse proxy 🚀 :

cd/etc/nginx/sites-enabled/ sudo ln -s .. /sites-available/wordpress.conf wordpress.conf systemctl reload nginxCopy the code

Now, go to example.com and see your blog home page again.

Get a free SSL certificate to support HTTPS

If you don’t mind the words “Not Secure” on the left side of your browser’s address bar (meaning your communications with the site are Not encrypted and may be subject to man-in-the-middle attacks, in other words you can’t safely enter sensitive information like passwords and email), then you can skip this step and just start decorating your blog. But being an obsessive + slightly paranoid programmer, I went ahead and walked the extra mile.

We use the free SSL service provided by Let’s Encrypt (replace example.com with your own domain name, agree to the terms and select “No” when asking “expose email” and “Force redirect HTTPS” when asking “No”) :

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d example.com -d www.example.com
Copy the code

After modifying the reverse proxy configuration file, add and adjust HTTPS Settings:

cd /etc/nginx/sites-available/
sudo vi wordpress.conf
Copy the code

New content for wordpress.conf (note that example.com is replaced with your domain name) :

server {
    listen      80;
    listen [::]:80;
    server_name example.com;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name example.com;
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by CertbotLocation / {proxy_pass http://127.0.0.1:8080; proxy_set_header Host$host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme; }}Copy the code

Refresh the reverse proxy, now we can use example.com to access blogs! 🚀

Congratulations on 🎉! At this point, the installation of wordpress is complete. All subsequent operations (changing the theme, installing plug-ins, and writing blogs) can be completed through the Front-End WebUI of wordpress.

🎄 Blog personalization | Restaurant decor

The data backup

Super handy free backup plugin: UpdraftPlus. You can set it to automatically back up every day and automatically upload backup files to Google Drive, keeping the latest X backups. This backup file contains all your blog posts, images, site themes, plugins, and more, and can be restored in one click, even if you reset the entire server.

Appearance (theme, color, font, etc.)

Blog appearance:

  • Theme: Blocksy, clean and easy to use (Appearance > Custom)
  • Color: I made the font black and left the rest untouched (Appearance > Custom > Color)
  • Font: I changed the code font from Monospace to Roboto Mono, leaving everything unchanged (Appearance > Custom > Font Style)
  • Summary: I changed the blog language to Chinese (Settings > General > Site Language) and then changed the length of the summary to 50 words (Appearance > Custom > Blog Posts > Card Options > Summary)

Background interface:

  • Hide the dark blue toolbar at the top of your WordPress screen: The Better Admin Bar plugin, and set everything to 0% opacity in Settings
  • Background theme: Kodeo Admin UI plugin. I think it’s clean and nice, and the home page is not crowded. The default “quick draft” for the first widget is also a big plus.

Side toolbar (contents, hyperlinks, etc.)

Enable the sidebar:

  • Home sidebar: Appearance > Custom > Blog Posts > Sidebar, select ON
  • Article inside sidebar: Appearance > Custom > Article Details Page > Select Design with sidebar

Add sidebar to Admin menu:

  1. Go to the Widgets edit screen: Appearance > Widgets
  2. Add a custom HTML component: Select custom HTML from the left and drag it to the main sidebar on the right
  3. Adding the following code (please replace example.com with your own domain name) gives you a tool menu that includes Dashboard, New Post, Draft, and Logout:
<div>
<ul>
    <li><a href="https://example.com/wp-admin/">Dashboard</a></li>
	<li><a href="https://example.com/wp-admin/post-new.php">New Post</a></li>
    <li><a href="https://example.com/wp-admin/edit.php?post_status=draft">Drafts</a></li>
    <li><a href="https://example.com/wp-login.php?action=logout">Logout</a></li>
</ul>
</div>
Copy the code

The sidebar displays the article table of contents:

  1. If it is a single article and you want the article table of contents to appear on the side, change it to a sidebar under the Settings gear in the editor. Otherwise, change it globally in Appearance > Custom
  2. Install LuckyWP Table of Contents plugin
  3. Go to Appearance > Gadgets and drag the LuckyWP directory widget on the left into the main sidebar on the right
  4. Customize: Minimum number of headings = 3, Depth = 3 (display only H4 and above headings), Width = Full Width, link color =# 3eAF7C (theme color)
  5. If you have an article with a very long table of contents and you want the sidebar to show only the table of contents, do the following:
    1. Install the Sidebar Manager plug-in, then add a new Sidebar in Appearance > Sidebars and set Sidebar To Replace=The sidebarAnd the Description =The article directoriesAnd the Display On =Specific Pages/Posts /...And specify this article
    2. Then go to Appearance > Gadgets and drag the LuckyWP directory widget into the Articles Directory on the right

What I’ve achieved is a new page that displays the latest 20 mammoth updates and retains the format of the original text (e.g. line breaks, etc.).

  1. Install the Super RSS Reader plug-in
  2. Install Widgets for Shortcodes
  3. Go to Appearance > Widgets and drag the Super RSS Reader widget on the left into the Widgets for Shortcodes on the right
  4. Put your Mastodon RSS (generally ishttps://example.com/@username.rss) copy and paste it into the WIDGET’s URL column
  5. On the Widget’s Content Tab, select Enable Rich Description and increase Trim Length (I set it to 200).
  6. Create a new page (page > New page), copy and paste the Shortcodes shown at the bottom of the Widgets for Shortcodes (in square brackets) into this page, and add this page to the main blog page (for example, Replace the sample Page that comes with the Blocksy theme.)

Editors (Markdown, images, etc.)

The editor

  • If you want to write in Markdown and can accept two-column rendering (as opposed to wySIWYG like Typora) : install the WP Githuber MD plugin. But so far, I think Blocksy’s rich text block editor is actually quite sweet, similar to Douban, with a high level of appearance. Although there are some painful places occasionally, the degree of pain in general is within the tolerable range, and it is relatively distraction free. Don’t interrupt your writing
  • You can switch between HTML and rich text editing, so in theory you can embed anything in a blog post, including all sorts of messy JS and so on
  • You can install the wordpress app on your phone or tablet. Is the editing experience normal? You can’t render the code, or is the web editor more convenient

The image processing

  • If the image is large, sometimes wordpress will automatically compress the JPG you upload into a blur. Changing to upload PNG seems to work, but if it exceeds the maximum size allowed by wordpress, you need to change to a graphic bed (I use uPic).
  • Automatic Upload Images: The Automatic Upload images plugin automatically uploads images you copied from other websites or spreadsheets to the wordpress background, even if the original link fails. Looks like this plugin can also get around wordpress ‘maximum size limit for uploading images?
  • Automatically set your article cover image: The Easy Add Thumbnail plugin checks if there is at least one image in your article and automatically sets it to the cover if there is.

Site speed measurement and data statistics

  • Install the Site Kit by Google plugin to show how many hits your blog is getting, where they’re coming from, how fast they’re coming to your blog, etc
  • Test the speed at which your blog is accessed in the country: I have used both webmaster tools and 17CE to see the speed at which your site is accessed across the country in map form

✍️ write an article | serve food

The final multi-device edit-update experience is smooth and smooth, which is one of the most important factors when CHOOSING a site:

  • After login, you can directly click the “Edit” button on the interface (at the end of the article) to enter the editor to modify the article, which is very convenient.
  • Draft box function is very practical, you can temporarily record inspiration, convenient to organize the future written.
  • Each device can be edited and uploaded via the Web edition editor, and tablets and phones can choose to use the wordpress app

After all, barrier-free blogging is the core purpose of their own website, if for the sake of toss and toss it would seem to have some upside down.

After the whole blog is built, there is only one feeling: wordpress really smells good!

Customize RSSHub and other services

  • [[install RSSHub on your own VPS]]
  • Other Cool Cool: I haven’t tried it yet, but I am still impressed by what I can do with a VPS.

Some really weird potholes

Generally speaking, the time for all these things to be finished adds up to two or three days. Encountered a lot of egg pain in the middle of the problem, but fortunately finally solved 🐶.

Out of memory

My server has a total of 1GB of memory, and the MySQL database alone takes up 700-800GB. As a result, I can’t even install ZSH, let alone RSSHub. The solution is to add 1 GB of swap space to the server as described in this post. Use the free -h (or htop) command to check whether swap is enabled on your server. If not (i.e. swap capacity is zero), then you can get more virtual memory by enabling swap:

Open 1 gb swap space to expand virtual memory
sudo fallocate -l 1G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile
Copy the code

The SSL usage exceeds the upper limit

Yes, the free SSL provision service Let’s Encrypt limits the frequency of requesting SSL for each domain name: Rate Limits — Let’s Encrypt, do not apply for more than 50 certificates per week, No more than 5 certificates per week for the same set of domains (such as example.com and www.example.com). (If you violate the latter limit, a simple hack is to add a second level domain, For example, blog.example.com, and then apply for an SSL certificate with that domain name so it is not treated as the same set of domains). If you are modifying or testing your site frequently, add the –staging option to the Certbot Command, and then apply for a formal SSL certificate.

This post was posted at minority