Necessary environment

  • Git(Xcode comes with Git when you install it, so I won’t go into details)

  • Node.js can be installed in a variety of ways, but in order to avoid installation failures due to lack of various environments, you are advised to download the installation package and install it directly. nodejs.org/zh-cn/downl…

  • Hexo

Open the terminal and enter NPM install -g hexo -CLI to install.

Build local Hexo

Hexo is just a tool for generating static web blogs that you can debug locally. If you want others to see it. You must upload to Github or your own VPS server. Don’t worry, I’ll show you how to do it.

1. For testing convenience, I set up my local environment in a folder on my desktop. You can also put it in the folder you want.

Note: if you want to save somewhere else, then you need to open the place you want to save, and CD into, drag the target folder to terminal, both can get the target path, copy the path, and then CD into both.

2. Open the terminal and enter CD Desktop to the Desktop.

3. I’m going to build the environment in the peng folder on my desktop, so I’m going to go ahead and type mkdir peng on my terminal to create a folder named peng.

4. CD peng go to the folder called peng.

5. Enter hexo init for initialization.

6. Enter NPM install to start the installation. After a while, the node scripts/install.js file will be stuck.

7. Type NPM install hexo-deployer-git –save to install the plug-in for the simplified command.

8. Type hexo s and copy the address http://0.0.0.0:4000/ to your browser for a local preview.

9. Yes, it’s that simple. The local environment is set up successfully. Press Control + C to exit the preview. Do not turn off the terminal, all operations to be done in this folder called peng operation

10. Next we need to have the local environment generate static web pages and upload them to Github.

Deploy the blog to Github Pages

1. Open github.com and log in to your account, which must be verified by email. Click Verify Email Address to Verify the email address, otherwise deployment may fail and 404 will appear. Github will send you an email when you sign up for an account.

2. Once you’re logged in, click on the Github avatar in the upper right corner and click Your Profile.

3. Then make a note of the Github username in the red box in your browser’s address bar.

4. Click the + sign button in the upper right corner to create a new warehouse.

The repository name must be your username. Github. IO.

6. Click the button to copy and record the warehouse address for later use.

7. Open the hexo configuration file by typing open _config.yml, and slide to the bottom to find deploy, Repository, and branch.

Git after type, repository after the location of the repository you just copied and recorded, branch directly to master, save and close

deploy:
    type: git 
    repository: https://github.com/pengpengtest/pengpengtest.github.io.git
    branch: master
Copy the code

8. Type hexo g -d to regenerate and deploy the web page to the Github repository. You will be asked to enter your account number and password. After entering the account and password, press Enter. Passwords do not appear explicitly.

9. The following figure shows the successful deployment of the blog to the Github repository. Open the Github repository and there are already files in it.

10. Next, enter your username.github. IO in your browser. The blog has been successfully deployed to the Github repository! Others can also use this address to access your blog with your username.github. IO!

Publish new articles

1. Enter hexo n “Article name” on the terminal to create an article. And open it with open XXXXX. Write the content of the article.

2. Open your username by typing hexo g(build) and hexo d(deploy), or simply hexo g -d. New articles are published successfully (sometimes you need to clear the browser cache).

  • Input, respectively,hexo gandhexo dEquivalent tohexo g -d.

Change the Hexo theme

1. Search the hexo theme in the search engine.

2. Here, we use THE IISSNAN/Hexo-Theme-next theme to demonstrate. First go to the github repository for the theme you want to use and copy the repository address.

3. On the terminal, enter the git Clone theme repository address or theme name. Next download.

git clone https://github.com/iissnan/hexo-theme-next.git themes/iissnan

4. Once the download is complete, type open _config.yml to find the theme and modify the hexo configuration to tell Hexo the theme name you want to use.

5. Hexo Clean cleans the cache, hexo G-d regenerates the blog and deplores it. Open your username.github. IO and change the theme successfully! (Sometimes you might want to clear the browser cache, which is a hassle, you know.)

6. If you want to change themes in the future, follow this procedure. Clearing the cache will not delete your articles.

Use Github as a map bed

If you want to use Github as a map bed, you can put the image in the local hexo directory /source/ folder. I created a new image to store it. You need to deploy and build first, put the image on Github and link to it.

If it is placed directly in the source directory, then your image link is http://domain/image name. Picture suffix.

Such as: http://cxp.im/favicon.ico, a small icon, I’m in the HTTPS forwarding, so the actual is not the same as shown on the browser links (you can just copy the link I gave to see)

If it is on the secondary directory and it need to add directory name, such as I under the images of the head, it is http://cxp.im/images/icon.jpg

The popular science time

  • Important: All hexo XXX operations must be performed using terminal CD in your local environment directory before hexo XXX operations can be performed.

  • Github may not be able to display a new post after it has been created, modified, or changed the configuration of a blog or topic. If not, clear the browser cache. If not, hexo Clean cleans the local cache. Then rebuild and deploy.

Hexo local environment description

_posts under source stores all your blog.md files. You can create blog posts by hexo n "XXX". You can also drag an XXx. md file directly into themes to store all your theme filesCopy the code

Various Hexo XXX operations

Hexo Clean cleans the cache, which is typically used when the configuration does not work, or when an article is published and not displayed, etc. Of course, sometimes clearing the browser cache is necessary. Hexo g regenerates static web pages, publishes all articles, modifs articles, modifs hexo configuration, modifs theme configuration, etc. Github Hexo s You can use this command to preview your static web pages locally while writing articles, including modifying various configurations.Copy the code

Necessary syntax and tools

  • With Hexo blogs, you need markdown syntax to write beautifully formatted articles. Do your own markdown syntax keyword search.

  • And you need an editor that recognizes and writes markdown syntax. Do your own markdown editor keyword search. All kinds of free, paid.