The text/north mom

First original from the front end of the most handsome public number: front end you don’t make please wechat search attention

Front end you don’t make: may be sister most, and front end the most handsome public number!

This article takes 3.5 minutes to read




one

Direct entry to the chase, see north mom first personal blog: http://www.guoxiaobei.com

It goes without saying how important it is for ordinary people to have their own independent blog or website in this day and age, let alone that we are programmers.


I promised a long time ago that I would post an independent blog tutorial if I got over 200 likes, but the post went straight to 300 likes and there was no escaping it.


It also proves how eager people are to have a website of their own.


But in the traditional sense, the establishment of a website is the need to spend money, server, database and so on, and the price is not cheap, how to do that?


Smart people have a way, that is to use Github + autogenerator + a few commands directly set up the website, in fact, the network has a lot of configuration tutorials.


If you feel that bema’s writing is not good, you can search by yourself, similar, but MINE is more clear and easy to understand.


To look at my blog in making open source address: https://github.com/xiaobei666/xiaobei666.github.io.git


As this is part of the tutorial series, it involves a series of commands, codes and configurations, but it is not easy to display in the wechat public account.


So I put this [5 minutes 0 yuan build independent blog series] is divided into 3, today first released “a”.


Hope you forward and collect, good things do not cover.


two

Github Pages + Hexo + Node.js

System environment: I’m running OSX for MAC, so the screenshots and commands are MAC, but like Windows, don’t worry about this.


General process: in fact, simple, is the command

  1. Have a Github Pages

  2. Configure the Hexo environment on the local computer (hexo is bound to Github Pages, writing and modifying posts, etc., generating static blogs)

  3. Github Pages has a secondary domain name, but only a domain name of its own, to be considered a real personal website.


This is a how-to tutorial on how to build your own standalone blog using Github Pages and Hexo. It explains how to deploy Hexo into your Github project and make it accessible independently.


Github Pages + Hexo is used to install and configure Github Pages + Hexo.

Step 1: Create a repository for Github and Github Pages

Github’s advantages

  • GitHub is code hosting based on git implementations. You can theoretically build an infinite number of websites.

  • GitHub is free to use and fast and stable.

  • Github has a lot of open source libraries, so you get the idea.

What are Github Pages

Github Pages can be thought of as user-written static web Pages hosted on Github. Github is a static solution that allows you to display your documents and web pages

Why use Github Pages

  • You can bind your domain name (but for now it looks like you can only bind one).

  • Github Pages provides you with a free server that saves you the trouble of building, buying, and writing your own database.

  • So, Github Pages is just a traditional web server, okay?



Set up your Github Pages repository


Github Pages are easy to create, as long as you have a Github account to create a repository, but the repository has rules, the format must be: your name. Github

For example, my: xiaobei666.github. IO

Then follow the instructions and proceed to the next step. It’s very simple.

If you don’t have a Github account, please familiarize yourself with Github first, otherwise we can’t continue to play.

If you haven’t heard of Github, I think you can quit the programmer business.

2. Install Hexo

Prerequisite: Node.js must be installed, that is, using the NPM command. If you’re a front end in 2019 and haven’t used NPM commands, I urge you to learn.

By default, node.js is installed. If I have to tell you how to install Node.js, do I have to tell you how to boot node.js?

Hexo introduction

Hexo is a fast, concise, and efficient blogging framework. Hexo uses Markdown (or other rendering engines) to parse articles and generate static web pages with beautiful themes in seconds.

There are many tutorials available on the Hexo installation website, but many of them are pasted and copied, outdated, out-of-date commands that vary from version to version, so it’s best to refer to the official Hexo installation tutorial for step-by-step instructions.

Hexo installation

$NPM install -g hexo-cli

To install Git Bash Here, right-click Git Bash Here and type NPM.

I don’t need to tell you about MAC.

npm install hexo-cli -g

npm install hexo-deployer-git --saveCopy the code

The first sentence is to install Hexo.

The second sentence is to install Hexo deployer to git page, both need to be installed.

Create the Hexo folder

After installing Hexo, create a directory (F:\Blog\Hexo) based on your preferences. Go to F:\Blog\Hexo and right click Git Bash Here to go to the Git command box.

$ hexo init
 
$ npm install 
Copy the code

After installing Hexo, Hexo will create the required files in the specified folder. The whole process is automated.

After $NPM install is executed, the plugin will be automatically installed according to the information in package.json, regardless of the process.


At this point, hexo is already on your machine, which is what we call local development.

If you want to see local effects, that’s it.

Run the following statement to log in to localhost:4000

hexo generate
hexo serverCopy the code



This is already a long time, so this is the end of the first article today.

It has already been realized to let you see the true face of Lushan, but this “Lushan” has not been officially released.

But you can already view and modify it on your local server using the traditional localhost:4000.

As for how to blog, take a look at the official notes of Hexo for an overview. The second post will come soon.

Official documentation of hexo: https://hexo.io/zh-cn/docs/setup.html


three

Where do people like to be lonely, just don’t make friends randomly, that will only end up disappointed.



Read more:

1. It’s the end of the year. Stop being indifferent

3. Why do I keep stressing that outsourcing companies should not be hired

Every day just want to hear you say: small north the most handsome!

Long click scan code to follow me

You don’t mess with the front end




The text/north mom

It takes 5.1 minutes to read this article

one

Here is the first article in the series of 5 minutes to build an independent website:


The Hexo and GitPages series, in fact, has many tutorials on the Internet, but they are not easy to understand or even messy. The series has no technical content, but it requires a reasonable combing of the steps. So, AT the request of my fans, I took the time to publish this series.


This series is divided into three (explain: this series, write very detailed, also very tired, than other network tutorials are clear and easy to understand, so each will break my, at the end of each month only open a praise rule, this several I will open praise, O(∩_∩)O).


In the first article, I briefly covered how to install, run, and preview the Hexo blogging system on your machine. And the relationship with Github, what github does. If you don’t know why, please go back to the first one.


How to publish a one-click, one-line command to Github and GitPages? How to achieve true extranet access, that is, make your site searchable to everyone on earth.


The third explains how to beautify their blog page, after all, “ugly”, is we absolutely can not tolerate; How to add one-click comments to static blogs; And you don’t have to develop it; Add one more SEO tip.


Without further ado, here we go. Below is me executing the local command

Hexo Init, NPM install, hexo G, hexo S native demo results


// Hexo init // hexo automatically initialized configuration files, including all paceage.json dependencies NPM install // // Start hexo server http://localhost:4000/Copy the code

Then open http://localhost:4000 and the following local style appears.

Of course, the default site title is Hexo. I changed it, I changed it to my tag, for example.


As for where to change, the following will explain a configuration file, at a glance, a look to understand should be.




two

Know the directory


If your teaching commands in the first post are all executed properly, your local hexo file directory should look like this.



Here are a few important things you can do with directories before you get confused.


Where _config.yml is the key. This is the global configuration file for your blog, including uploading links to Github.


Also, the title title of the website I just said is right here



And here, under _posts, is the source of the blog posts you’re going to write with makedown syntax.



See? My first local article was titled:



Then, in my local hello world.md, it’s the equivalent. He updates everything I write. Isn’t it beautiful? And it automatically refreshes.


Static files are automatically generated to the public folder after hexo g is typed on the command line. It then automatically generates a list of articles locally.


three

Local direct uploadGithub


Remember that xxx.github. IO that Beima asked you to set up in Gayhub in the first post. Warehouse?



This is where it comes in. It’s going to be your free server for storing your blog files.


Now that a free server is available, how can we upload documents directly from the local site once we’ve written them? You can’t upload file by file, can you?


There is a way to automatically upload a single command to a Git repository after I have configured it.

1. Run the deploy Git plug-in command


NPM install hexo-deployer-git --save // This is the key component of hexo and git auto-docking uploadCopy the code

WARN ignore it, that is the suggestion, and if the following prompt appears, the package is secure.


2. Change the warehouse address in the topic configuration file _config.yml.

Pull down the bottom line of _config.yml. configuration


deploy:
  type: git
  repository: 
    github: [email protected]:<username>/<username>.github.io.git
  branch: masterCopy the code

This is my address below



3. Configure the Github authentication mode

Note that executing hexo d will submit the Github repository directly, and if you have not authenticated github’s local relationship, you will be prompted for a username and password to verify your identity.


I recommend SSH public key authentication, but HTTPS is also acceptable. But every time you update, you may have to enter your Github username and password.

Like this


If you don’t want to type in every update, you need to learn how to configure SSH global public keys. As for how to configure global SSH, I do not want to explain here, from other places directly put a link, you can follow this.


In making add SSH key steps: https://www.cnblogs.com/ayseeing/p/3572582.html


After configuring your repository address and authentication mode, perform the hexo d command to upload your local hexo blog static files to the Github repository with one click.


If it works, it’s going to be like this, it’s going to be a bunch.



That is to publish my local http://localhost:4000/ file to xiaobei666.github. IO warehouse.


This warehouse was empty when it was built. And then when hexo D is executed and successful, the refresh looks like this.



Ok, so you’re all familiar with this, you know, CSS, HTML, IMG, pure static resources.


There is an index.html in it. So this is the address to access your home page. Now you and others in the browser input: https://xiaobei666.github.io (of course is your own name)

You can access your own blog directly online.


four

Here’s an explanation:


GitHub Pages is enabled by default as long as your repository name conforms to xxxx.github. IO rule name.


If you have an index. HTML file in your repository, you can access it via https://xxxx.github.io, okay?


As for why hexo has gone all the way around, it’s because Hexo can beauten pages directly (next article), supports the most convenient Makedowm syntax, a production static file, and most importantly can be submitted to Github with one click. How much time can you save?

Egg operation ~ Configure the real domain name

Now the default domain name or xxx.github. IO, is not very no feeling? Do you want to have a domain name like me?

Personal blog address:

www.guoxiaobei.com

1, first of all you need to go to the domain name registrar (Ali Cloud Tencent cloud, etc.) to buy a domain name, see you personally. The prices are about the same anyway.


3. Ping github. IO to obtain the real IP address.


Then go to the domain console and resolve the domain name to github. IO’s digital IP address, 185.199.109.153



Take my Aliyun domain name as an example, as shown in the figure below, add two resolution records: add A record pointing to 185.199.109.153.

According to my record, add by yourself.

3. Add the CNAME file to the source directory of the root site. It’s called CNAME. I can’t make a mistake here.

The file is the domain name you just bought, guoxiaobei.com. Do not add WWW, do not add WWW, do not add WWW.

4. Execute hexo d to publish the site to GitHub, and you should see the CNAME file in Git. After a few minutes, you can access the site using xxx.com. Ok, this article is here to live together, perfect implementation visit xxx.com so that the whole world can see you. If you don’t know yet, study it carefully.

Beima’s exhausted. I think you know what to do.

five

It doesn’t matter to be alone, as long as you love someone from your heart, life will be saved. Even if I can’t live with him.”