Build a Hexo blog and deploy it to Github
background
There are already many blogs on the market, such as CSDN, Nuggets, Blog Garden, Jianshu and so on. We can publish content directly on it, and the interaction is more user-friendly, and it can also be retrieved by search engines. But some friends want to build a blog of their own. Today, I will take you to build your own blog (under windows) by using Hexo + Github Pages.
Introduction to Hexo
Hexo is a static blog program based on Node.js, which can easily generate static web pages and host them on Github and Heroku. And many people have made many excellent themes for it, you can set it according to your own preferences.
Hexo is a fast, clean and efficient blogging framework. Hexo uses Markdown (or other rendering engines) to parse articles, and within seconds, it can generate static web pages with beautiful themes.
Environmental preparation
Before building, you need to do some preparatory work. First, you need to make sure that Git and Node.Js have been installed on your computer, and then you can start installing Hexo. First, let's take a look at how to prepare these environments.
- install git
Window:https://git-scm.com/download/win
macOS:https://sourceforge.net/projects/git-osx-installer/
Linux(Debian,Ubuntu):sudo apt-get install git-core
Linux(Fedora、RedHat、CentOS):sudo yum install git-core
- Configuration
After the installation is successful, you need to bind git with your GitHub account, right-click to open Git Bash, and then set the configuration information:
# 配置用户名和邮箱
git config --global user.name "github 用户名"
git config --global user.email "github 注册邮箱"
# 生成 ssh 密钥
ssh-keygen -t rsa -C "github 注册邮箱"
#我这里原本设置过,选择了overwrite重写
After executing the above command, two files, id_rsa and id_rsa.pub, will be generated in the C:/Users/.ssh/ directory. The former is our private property, while the latter is open to the outside world. Then find the id_rsa.pub key in the generated .ssh folder, copy the content;
then open the GitHub-Settings-Keys page, create a new SSH key, fill in the Title and Key, the Title can be arbitrary, and the content of the Key It is the content in the id_rsa.pub we just copied, and finally click Add SSH key;
insert the picture description here
- Node.js installation
Go to the official website to download the latest stable version of Node.JS. Generally, 64-bit is recommended (the computers you use now are basically 64-bit). The installation is very simple, basically just click on the next step. It should be noted that hexo requires Node.js 12 or above, and I downloaded version 12.22 here.
- Verify
After the installation is complete, to check whether the installation is successful, you can open the command prompt (Win + R), enter cmd to open the console, and enter the following command. If the corresponding version number appears, the installation is successful;
- Settings
Since the download package is from a foreign server, the speed is relatively slow. Here I have configured a Taobao mirror
npm config set registry https://registry.npm.taobao.org
Hexo installation
Create a folder on your hard disk to store your blog files, for example, mine is in E:\Program Files\github\blog. Then enter the current folder from the command console, and the next step is the installation process.
- Install Hexo
npm i hexo-cli -g
- under the newly created folder
hexo init .
npm install
- After initialization, the directory structure is as follows
.
├── _config.yml # 网站配置信息
├── package.json # 应用程序信息
├── scaffolds # 模板文件夹
├── source # 存放用户资源
| ├── _drafts
| └── _posts
└── themes # 主题文件夹
Generally, you can visit here through http://localhost:4000
- Not surprisingly, I made an error
fatal: unable to access ‘https://github.com/…/.git/
#解决办法
git config --global --unset http.proxy
git config --global --unset https.proxy
#在cmd下执行ipconfig/flushdns 清理DNS缓存
ipconfig/flushdns
New Test Blog
- Order
# 新建博客
hexo new "博客名"
# 生成静态网页
hexo clean
hexo g 等同于generate
# 打开本地服务器
hexo s
#打开 localhost:4000就可以访问到本地的博客了
Github personal repository
After completing the above steps, we can preview locally, but if we want to publish it online for others to see, we have to use the function of Github Pages. The following will introduce how to combine Hexo + Github Pages to Our blog is pushed online so that you can access it anywhere.
1. First of all, you must have a GitHub account. If you don’t have one, please go out and turn right to register an account.
2. After you have an account, create a new warehouse, and make sure your warehouse is public. If you want to make it private, who can access it? ? ? At the same time, the warehouse name must be
用户名.github.io
Deploy to Github
After completing the above steps, you should be able to preview locally. The next step is to push the website to Github Pages, and then we can be accessed by others.
Just set the site configuration file _config.yml in the root directory of our blog to your personal warehouse name. After
completing the above steps, the next
hexo clean
hexo g 或者 hexo generate
hexo d 或者 hexo deploy
At this point, it stands to reason that my local content has been pushed to the remote GitHub warehouse, and it should be accessed in the browser, but unfortunately, something went wrong again
出现ERROR Deployer not found: git
原因:少了hexo针对git的deploy组件
解决方法:npm install --save hexo-deployer-git
It should work now, it came out, but my newly created blog has been pushed over, but it is not displayed, so I couldn’t access the above page for a while, it was always a readme.md under the main branch content.
After some twists and turns, I found that all new libraries announced by github on 2020/10/1 will be named with the neutral word [main] to replace the original [master]. If we upload the warehouse through the method of git push -u gridin master , a master branch will appear in the github repository.
Solution:
1. In order to maintain consistency, you can change the default branch to main when local git init:
1. We only need to find >Repositories> in the personal settings of github and change the default main to master and then create the project Just warehouse.
It should be fine now, but it is still no, and it keeps prompting timeout, although it has already
But the link timed out, git crossed, and failed to connect to github.
That’s the way, open the road in the mountains, build bridges in the water, configure it.
First step: get the local ip address
cmd->ipconfig
Step two: ping
Test the network
to show that the connection is normal.
third step:
Find the hosts file in the git directory.
The general directory is C:\Program Files\Git\etc, I modified the path here, under E:\Program Files\Git\Git\etc.
Enter the file, find # localhost name resolution is handled within DNS itself. Just
add it. Ended with flowers, see you Nora