How to check remote hexo webpages in our local computer
Basics of Hexo
Basic knowledge before developing hexo project
| Tool | Full name | Purpose in Hexo | Key Benefits |
|---|---|---|---|
| NVM | node version manager | Manage Node.js versions for Hexo projects. | Avoid compatibility issues, work with multiple projects requiring different Node.js versions. |
| NPM | node package manager | Install Hexo, plugins, and dependencies. | Streamlined dependency management, consistent environment across systems. |
Basically, use nvm to install the latest nodejs. You can type “nvm current” to show the current used version of nodejs in your computer. The version of nodejs sometimes is important, for exmpale, some higher versions of nodejs may cause many strange problems when developing hexo project, down-gradeing it to a lower version may solve the problems. Currently, the computer (203.205 computer in university of Oulu) uses version v20.10.0. It works fine.
Then just use the latest version of npm, which can be done by “npm install -g npm@latest”. The “-g” option install the package globally. Besides, you also need “npm install -g hexo-cli” to install hexo-cli package, which is essential for developing hexo projects. You could also modify “hexo-cli” to “hexo-cli@latest” to install the latest version of hexo-cli package.
After hexo-cli is installed, you need to init a hexo project (my project’s name is “zhuo-blog”, so let’s use it) by “hexo init zhuo-blog” and it will crate a directory “zhuo-blog” which is your hexo project root dir.
Now, enter the dir “cd zhuo-blog”. You could see a file named “package.json” that lists all the needed packages with specific versions for the project. Not sure how the versions of those packages are determined, maybe by the specific versions of nodejs, npm, hexo-cli, etc.
Therefore, you need to install all the needed packages by simply running “npm install”. Then npm will automatically install all the packages (by reading package.json), not globally, but only in your project directory. The installed packages will be stored in the created “node_modules” folder.
You can install more packages to enrich your project’s functionalities by “npm install package-name”.
Modify the _config.yaml file to configure your expected functions.
Choose a theme
I think there is a default theme for the project. However, you could always change the theme by setting it in _config.yaml under the field “theme: xxx”, provided that you have already git clone the theme repsitory under “themes” folder (alternatively, you can also install the theme by following the installation instructions in the official website like github readme page).
I am using “next” theme, I guess the version is 8.21.1. I just use git clone to clone the repository to “next” folder under “themes” folder for installation.
1 | cd themes |
next also has its own _config.yaml, where you could add particular rendering functions for your needs.
Finally, commands to develop hexo blogs
hexo new post “blog name”
This command create a blank post “blog-name.md” under “sources/_posts” folder for you to edit. It uses markdown edditing format.
hexo generate
After edited your md file, this command will update “public” folder (if not exists, a new one will be generated) with all the static files where you could open in your brower with “localhost:port”, with the following command.
hexo server
It create a link for you to browse in the local brower, where you will see the blog webpages. If you are not satisfied with the webpage, modify your md file, and run “hexo generate” again, and refresh your webpage. You don’t need to run “hexo server” again. Alternatively, you can run “hexo generate --watch” such that it keeps generating whenever it detects md file is modified. You can also run “hexo clean” to completely remove the “public” folder follwed by “hexo generate”. But if the modification of your md file is minor, it is not necessary.
hexo deploy
When you are satisfied, run this command to deploy your blogs to github (the github address is defined in _config.yaml of the project).
Environment setting 1 (1 pc)
Suppose we are developing hexo blogs in a pc and we wan to check the website effect of our blogs (in this case, only one pc is involved).
It is quite simple. Just like above, run “hexo server” and click the link to check the webpage in this computer.
Environment setting 2 ) (2 pcs)
Supposing you are using your laptop, but the hexo project is located in a remote server, you want to open the webpage in your laptop browser. In this case, you need port forwarding. Then in the remote server, you have to run:
hexo server --host 0.0.0.0 --port 4000
0.0.0.0 allows the project to be opened in a remote computer (which is your laptop, because the remote server becomes “local” for the project). The port number can be any as long as it is not used anywhere.
Now, in your local laptop, you have to run
ssh -f -N -L 4001:localhost:4000 username@remote-server-ip
This command enables any traffic sent to port 4001 on your local machine is forwarded to port 4000 on the remote server via the SSH tunnel.
After that, open http://localhost:4001 in your browser to see the blogs.
Here, -f means run in the background, -N means no command is executed in the remote server.
Environment setting 3 (3 pcs)
Now, 3 pcs are involved: pc1, pc2, pc3. pc1 is your laptop, pc2 is the middle remote server, pc3 is the remote server that has the hexo project. Similarlly:
In pc3:
hexo server --host 0.0.0.0 --port 4000
open another terminal in pc3 and run
autossh -fNR 4001:localhost:4000 username@middle-server-ip
Then traffic sent to 4001 in middle server (pc2) will be forwarded to 4000 in pc3.
In your laptop, run
ssh -f -N -L 4002:localhost:4001 username@middle-server-ip
Doing so, traffic sent to 4002 on your laptop will be forwarded to 4001 in middle server, and then forwarded to 4000 in pc3. You can open http://localhost:4002 in your laptop browser to see the blogs.
- Note: in the above process, you don’t run commands in pc2.