The original address www.wistbean.com/build-perso…

Why have your own personal website?

I think now in the Internet era, have their own personal website and business card is about the same, here can constantly record their own life, summarize their own knowledge, life thinking what, later to introduce themselves directly to the website thrown to each other. On the one hand, it can be forced, and on the other hand, it can let the other party better understand themselves.

There are a lot of blogging systems out there, so you can register and create your own Blog on their platform. It’s very convenient, but you have to pay the price of putting up with a lot of ads on their platform. Subject to their restrictions and supervision, people unhappy on the casually deleted your article, not to discuss.

Like this:

Cool? I don’t like it.

So oneself make the website that belongs to oneself completely, relatively speaking, did not have so helpless pain. Why relative? Because we have to look at the big guy, too.

But it’s better than being disgusted by all the platforms. Also don’t fantasize about what blockchain blog system, for now, not realistic.

Use the Hexo framework to build personal websites

I’ve been rearranging my Blog a bit over the last couple of days because I used the Octopress framework for a few years and there aren’t a lot of themes and plugins.

I looked at a couple of frameworks and I found that Hexo was nice, like Octopress, and you could write articles in Markdown and generate a static website, but with a bit more theme.

Hexo is nodeJs based and easy to set up. So let’s talk about building from zero.

Begin to build

  1. Since Hexo is based on the Node framework, we first need to download and install Node from nodejs

  2. After the installation is complete, open the command window and type node -v. If the following output is returned, you have successfully installed Node.

  1. After successful installation, run the following command from the command line window to install Hexo:

    npm install hexo-cli -g
Copy the code

  2. Initialize the blog directory:

    Hexo init WistBean.github. IO (replace wistBean with your English name)Copy the code

  3. Once the initialization is complete, we go to our directory:

    cd wistbean.github.io
Copy the code

  4. The installation

    npm install
Copy the code

  5. Clean it up and generate a static page

    hexo clean
hexo g
Copy the code

G is generate

  1. Get your site up and running

    hexo s

S is server, it’s running on the server

  1. Open your browser and typelocalhost:4000. From then on, your personal website is built so fast!

Make your personal website beautiful blingbling

Modify personal information on your website

Go to your website directory and open the _config file, which is used to configure your website information.

My simple configuration is listed here, which you can see in this document

Title: Wistbean subtitle: Description: Wistbean's personal blog, mainly involves the programming (Java, Python, Linux, etc.), personal improvement learning, video tutorials, "Sure software technology" radio program keywords: Wistbean, sure software, Java, Python, radio, tutorial author wistbean language: zhCopy the code

Pick a topic

Just finished building the website, do you feel a little ugly, do not conform to your beautiful face? That’s what I think, so choose a theme to decorate it with, and here you can choose your theme: Hexo

Download the theme

After you have selected your theme, you can download the theme resources. For example, HERE I choose a NEXT theme to demonstrate:

      git clone https://github.com/iissnan/hexo-theme-next
Copy the code

The main thing here is to download the themes into our Themes directory.

If you’re not familiar with Git, check out my previous Git video tutorial: Using Code Managed Git

Configure the topic

After the theme is downloaded, in the _config.yml file in your root directory, change theme to your theme name:

      theme: next
Copy the code

Regenerate and run

      hexo g
      hexo s
Copy the code

Check it out, isn’t it much better than before?

Write your first blog post, tag it and categorize it

Now that you’ve made your site beautiful, easy, and simple, it’s time to write the content. It’s the content that matters.

Two ways to create your blog post

Order form

Use the following command in your blog directory:

Hexo New Article (here's article with the name of your article)Copy the code

This will generate an article. Md file under source/_posts, where you can write your blog content. Write in Markdown syntax.

Direct new mode

Create a new Markdown file at source/_posts. Create a Markdown file at source/_posts Recommended to use the command way, after all Geek a bit.

Label your articles

Tagging makes your articles easily searchable.

Open TAB function:

    hexo new page tags
Copy the code

At this point your source/ generated tags/index.md file, we will open it and change it to:

    type: "tags"
    comments: false
Copy the code

At this point you need to tag your article by saying at the head of your article:

    tags:
        - Tag1
        - Tag2
        - Tag3
Copy the code

Add categories to your posts

Categorizing and archiving is one of the characteristics of your blog.

Open the classification function:

      hexo new page categories
Copy the code

“Categories /index.md” is generated in your source directory. Open it and change it to “categories/index.md” :

      type: "categories"
      comments: false
Copy the code

At this point you can file your articles by adding the following to the head of your article:

Categories: - Category 1 - Category 2Copy the code

Note: Tags and Categories Make sure your configuration file _config.yml has tag_dir: tags and category_dir: categories opened. In addition, Markdown grammar is the most elegant, concise and simple to write. If you have not used the previous advice to learn Markdown grammar instructions, you can master it in about one hour. Because it’s as simple as HTML.

Add comments to your posts

When people read your article and want to discuss with you, how can they do without comments? Comments are also an important way to interact with your Blog.

Many topics now have systems built in for third-party reviews. The more common ones are:

  • Say more: duoshuo.com/
  • News soufangwang: changyan.kuaizhan.com/
  • Valine：github.com/xcss/Valine
  • Disqus：disqus.com/
  • A friend said: www.uyan.cc/
  • Gitment: github.com/imsun/gitme…

Oneself go to see, like which use which, oneself Blog wants freedom namely.

After selecting your comment system, you will be given an APPID and appKey when you register with the platform. Take this information and set it to the configuration file under your theme.

For example, go to your Themes /next, open _config.yml, go to Changyan and change enable to true.

Changyan: enable: true AppID: here write your message in appID appKey: here write your message in appkeyCopy the code

After setting this, clean it again to generate a comment:

 hexo clean
 hexo g
 hexo s
Copy the code

Open your preview link and see below your post. Comments are already available.

Let the world know you

If you don’t want to spend money, you can use GitHub Pages to deploy your own site.

For those who don’t know how to use GitHub’s shoes, check out my video tutorial: GitHub’s Complete Guide to Using them

Create a Github Pages repository

I will be able to access my site via wistbean.github. IO. I will be able to access my site via wistbean.github. Once that’s done, you’ll have your own Git address.

Install hexo deployer — git

Enter the following command in your blog directory:

      npm install hexo-deployer-git --save
Copy the code

Configure your Git

Open your configuration file and enter your Git address:

      deploy:
          type: git
          repo: https://github.com/xxx/xxxx.github.io.git
Copy the code

Push your site to Github

Enter the command hexo d directly

D deploy.

Visit your website

Enter your xxx.github. IO in your browser to access it!

For a little personality, tie your domain name

Had their own website, of course, is to want their own url, so just handsome, of course have their own server is more handsome.

Buy a domain name

About the purchase of the domain name, I recommend goDaddy, which is a foreign domain name, it is good to use.

Binding domain

After buying your domain name, there are a few easy steps to follow:

Add the CNAME file

In your blog’s Sources directory, create a new CNAME file and write your domain name in it. For example, I’ll write www.wistbean.com. Next, push the file to your GitHub, using the hexo s command.

Add two records for DNS resolution in the background of your domain name provider:

Host record: @ Record type: A Record value: 192.30.252.154 or 192.30.252.153 2. Host record: WWW record type: CNAME Record value: xxx.github. IOCopy the code

GitHub set domain name

Set your domain name on GitHub, click Settings on your GitHub blog project, go to GitHub Pages under Custom Domain and write your domain name, then save.

Above, you can access your website through your own domain name!

Server up, complete autonomy

You can use your domain name to access your website, but it’s nice to have your own server hosting your own website. GitHub blocks Baidu crawlers, so you can’t search for your website through Baidu.

If you have your own server, you can be included by more search engines, and you can also do other things with your own server.

Buying a server

The server here recommends to buy foreign of course, such words your domain name does not need to put on record, but also can build VPN, get three birds with one stone, acid cool.

Server purchase recommended use tile, because this is I used to feel the best price, but also can get a promo code, a lot of people do not know, get promo code can see here: get tile promo code

Use Nginx

After you buy the server, you can use Nginx as a web server for your website. It is easy to set up, but I don’t have much to say about setting up and configuring Nginx. If you haven’t played Nginx before, you can read here: Nginx building static Web servers

DNS resolves to your server

In your domain name business, the use of DNS resolution, add A record can be, the record value is your IP address of this server, generally enabled after 30 minutes or so can access.

Above you have the personal website that belongs to oneself completely.

Hexo reference article

  • GitHub+Hexo detailed tutorial on building a personal website
  • Use Hexo to build a personal blog
  • Hexo Advanced Tutorial: How to make your Hexo blog number one in search engines