Before building a personal blog website on Gitee, we need to make some preparations: register Gitee, install visual studio code (fully functional and practical), and install node.js.
I will introduce these one by one.
1. Gitee registration
1. Introduction to Gitee
Gitee is an open source source code management and collaboration platform based on Git launched by OSChina, similar to GitHub and GitLab. Gitee provides Git warehouse hosting, code hosting, code review, code collaboration, code packaging, deployment, social programming, CI/CD industry-leading automated construction, issues, wiki and other development services. At the same time, Gitee integrates many popular domestic and foreign Code scanning, compilation, testing, deployment and other development tools, public warehouses are free and unlimited use, private warehouse hosting is low-priced, the service is stable, and the response is fast. Gitee is committed to providing developers with a better code collaboration environment and better services, contributing to open source, supporting open source, focusing on developers, and service innovation.
Gitee has now become the largest code hosting platform in China and is committed to providing high-quality and stable hosting services to domestic developers.
2. Application of Gitee website
Gitee URL: https://gitee.com
After entering the Gitee webpage, you only need to follow its prompts to register and use it. Gitee interface introduction.
Here we can see a variety of projects and tools, we just need to find what we need.
When building a personal blog website, we need to build our own warehouse. The steps to build the warehouse are: Find the + sign in the upper right corner. Step 2: Right-click the mouse to create a new warehouse, choose the warehouse name, and it will mark the path for us. , enter the warehouse introduction, click Private, and create a warehouse that belongs to us.
New warehouse interface:
It is recommended to change the warehouse to an open source warehouse, because Gitee Pages does not support private warehouse services, but it is easy to set it to an open source warehouse later after setting it to a private warehouse. It only requires one step.
2. Visual studio code installation
1. Introduction to visual studio code
Visual Studio Code is a free, open source, cross-platform code editor developed by Microsoft that supports multiple programming languages, such as JavaScript, TypeScript, CSS, HTML, etc. It supports intelligent code completion, syntax highlighting, debugging, Git version control and other functions. It also provides many extension plug-ins that users can freely install and use. Visual Studio Code is known as a lightweight IDE, but its functions are very powerful and it has been widely used and praised.
2. Install visual studio code
Download address: VS Code's official website: https://code.visualstudio.com/ The download is slow, we can use the mirror website to download: https://vscode.cdn.azure.cn/stable/dfd34e8260c270da74b5c2d86d61aee4b6d56977/VSCodeUserSetup-x64-1.66. 2.exe
Just run the download and install. The visual studio code interface is very suitable for beginners.
Download a few plugins:
If you just build a personal blog website of your own, you can install it here. If you still want to continue using visual studio code to do some C++ experiments, you can follow the following steps to install MinGW.
After installing the extension Code Runner, you still need to click the settings icon -> Settings on the left toolbar, search for Run In Terminal and check the Run In Terminal setting.
3. Download MinGW (you do not need to install MinGW to build a personal blog website. This is a supplement for friends who want to implement C++. You can skip installing MinGW when building a personal blog website)
Official download website: MinGW-w64 - for 32 and 64 bit Windows download | SourceForge.net
Check whether your Jdk version is 32 or 64 bit and select download. cmd input: java -version, you can see that my 64-bit.
x86_64 refers to a 64-bit operating system, i686 refers to a 32-bit operating system, seh is new and supports 64-bit systems, and sjlj is stable and supports 64-bit and 32-bit systems.
Download speed will be a bit slow.
Create a new folder on drive D: D:\MinGW-w64.
Unzip x86_64-8.1.0-release-posix-sjlj-rt_v6-rev0.7z into MinGW-w64.
4. MinGW configure environment variables
Configure the environment in system variables.
Edit environment variables
Remember to click OK.
To test whether it is successful, enter:gcc -v
It shows success.
3. Install node.js (important because environment variables need to be configured)
1. Introduction to node.js
Node.js is a JavaScript running environment based on the Chrome V8 engine, which runs JavaScript code on the server side. It uses an event-driven, non-blocking I/O model and can easily handle highly concurrent applications. Node.js is also known as a lightweight web application framework. It provides a very rich library and modules that can help programmers quickly build efficient network applications. Node.js can run on multiple operating systems, such as Windows, Linux and Mac OS. The running environment includes: V8 engine built-in API (in layman's terms: in the JavaScript to be executed, the built-in API is called, and the V8 engine parses and executes it).
2. Download address: http://nodejs.cn/download/ (official website)
3. The next step is to install node.js
Click the change button to change to your designated installation location. You don’t have to click it. My installation address is (D:\node2023), which will be the default installation path, and then click next.
Finally click finish to install successfully.
Enter the win+R keys, enter cmd, and then press Enter to open the command line interface, or click Command Prompt.
Enter the command prompt window and enter respectively node -v. npm -vIf the following interface is displayed, the installation is successful.
Note: node -v displays the installed nodejs version
npm -v displays the installed npm version
Modify global module download path
In order to place the full module path and cache path in the node.js installation folder, create two folders node_global and node_cache under the installation folder D:\node2023 as shown below:
After creating two empty folders, just like the previous operation, press the win+R keys on the keyboard, enter cmd, then press Enter, open the command line interface, and enter the following command (the path can be specified casually, it will be automatically generated if the path does not exist) ) as shown in the figure.
If your creation fails, it is because you do not have enough permissions. Right-click node2023, Properties-"Security--"Set the users user full control permissions.
Modify system environment variables
Modify the Path under user variables to [D:\node2023\node_global], and then click OK.
Create a new variable name NODE_PATH in the system variable , variable value D:\node2023\node_modules, and then click OK. as the picture shows:
Create a new node global folder D:\node2023\node_global in Path under system variables , and then click OK
Let’s try to see if it’s successful, enter:npm install express -g
If successful, the express module will be automatically downloaded to our customized directory. Next, we will go to the address D:\node2023\node_global\node_modules to take a look.
Already successful.
Installing cnpm
Because the npm server is overseas, we use cnpm from Alibaba.
Enter the cmd panel and enter the following command:
1) npm install -g cnpm --registry=https://registry.npm.taobao.org(Globally install cnpm based on Taobao source)
2) npm config get registry(Check whether the installation is successful)
3) cnpm -v View version
Let's go to D:\node2023\node_global\node_modules to see if it is successful.
You can see that there is a cnpm package, indicating success.
4. Installation and basic configuration of hexo
1. Introduction to hexo
Hexo is a fast, concise and efficient static blog framework based on Node.js. It can convert Markdown format files into HTML files, and provides a variety of theme templates for users to choose from. Hexo uses EJS template engine and Sass CSS preprocessor to customize theme styles. Hexo also has a plug-in system that allows users to implement various functions through plug-ins, such as syntax highlighting, RSS, sitemap, etc.
Hexo was originally created by Tommy Chen and its source code is stored on GitHub as an open source project. It is widely used around the world. It is not only an excellent tool for personal blogs, but also a powerful tool for companies or institutions to build static websites. Hexo has the advantages of being easy to use, stable and reliable, and allows users to quickly create a personalized and efficient static blog website.
2. Create the Diyigebokehexo file in the D drive, and create the Mylove file in the Diyigebokehexo file.
Open visual studio code as an administrator, find our Diyigebokehexo file, drag the file into vscode to open, open the visual studio code terminal,
enter:
npm install hexo -g
Wait for completion, initialize a website, enter the command
hexo init Mylove
A question will arise here:
Solution:
1). Execute: in the terminal get-ExecutionPolicy, Restricted will be displayed.
2).Execute in the terminal: set-ExecutionPolicy RemoteSigned.
3). Delete the .npmrc file in the user directory of the local computer. The specific path of the file is C:\user\leglog
5) You also need to download webpack:
npm install webpack-dev-server --save-dev
The operation is as shown in the figure:
re-enter:
hexo init Mylove
Return to: Diyigebokehexo file can be found to automatically install some necessary files for us, as shown in the figure:
Input: hexo -vCheck version information
Input: cd Mylove
Go to the Mylove file.
enter:
hexo server
To preview, click this link.
As shown in the picture:
Press keyboard: Ctrl+C to stop running. Or just exit and re-enter vs code.
Input: cd Mylove
Enter: hexo new "我要发大财"(The command entered here is: hexo new "your theme"), run it again and you can see:
Enter: hexo clean, clear the blog cache, enter: hexo g, generate a static page. Note: ( hexo cleanClear the existing hexo website files;
hexo generate(can be abbreviated hexo g), generate new website files based on web page files and new css styles; hexo server(can be abbreviated as hexo s), start the local server, you can view the website modification effect at localhost:4000)
5. Blog deployment
1. Create a personal warehouse
Go to the Gitee web page, log in, and create a new warehouse of our own.
Remember our blog warehouse address.
Open the vs code terminal , enter: cnpm install --save hexo-deployer-git, and download the Git plug-in.
Go back to the D:\Diyigebokehexo\Mylove file in the D drive, open _config.yml, and start editing.
The first change:
Note: 1) url: http://example.com/your Gitee name
2) root: /your warehouse name/
3) There must be a space after the colon, otherwise it will not be recognized correctly
The second change is at the end of the file
Deploy to the remote end:hexo d
may appear:
Just write your Gitee username and password.
Enter: hexo deployorhexo d
The code appears: INFO Deploy done: git, indicating success.
When we return to Gitee, we will find that the file has been uploaded to the warehouse.
2. Host your blog website on Gitee
Next open the Gitee Pages service, which requires real-name authentication. This real-name authentication must be based on its requirements. I have authenticated my name many times, and it will provide results within 2 days.
Next open the Gitee Pages service.
can be seen:
Because Pages only supports the opening of public warehouses, we need to change the warehouse to a public warehouse. Open the warehouse and click Manage .
Set the repository as an open source repository.
After completing the above steps, we click Start .
You will see that we have successfully created our own blog website.
The website address here is our blog address. Act quickly to build your own blog website.
Replenish
When building a blog website, in addition to using visual studio code, you can also use Git instead of visual studio code to implement the construction.
Git installation
1. Introduction to Git
GIT is a free and open source distributed version control system that can track the change history of files and merge the changes made by multiple developers to the same file. 1) GIT can carry out collaborative development on different computers and supports different developers to modify the same file at the same time. The following are some functional applications of GIT:
2) Version control: GIT can easily track the change history of files, and developers can easily restore previous versions.
3) Branch management: GIT can manage multiple branches, allowing developers to develop independently on different branches, and then merge the results into the main branch.
4) Team collaboration: Multiple developers can collaborate on the same project at the same time, and GIT can easily merge their modifications.
5) Backup and recovery: GIT can back up the code base to a remote server or local hard disk, and can also restore the code from the backup.
6) Version comparison: GIT can compare code differences between different versions to facilitate code review and testing by developers.
In short, GIT is a powerful version control tool that can help developers manage their code base more efficiently.
2. Git download
You can download Git software from the Git official website, the download address is https://git-scm.com/downloads, or go to the Alibaba mirror website to download, or search for Git download in csdn, there will be many download ways.
Download from the official website https://git-scm.com/downloads and choose the WIndows version. However, the download from the official website is too slow. I still prefer to go to the Alibaba mirror website.
Download the Alibaba Cloud mirror website: https://npm.taobao.org/mirrors/git-for-windows/ , just select the version you want.
3. After downloading, start the installation steps:
Choose your installation path, I usually like to install on the D drive.
Next, just install it by default.
The installation is successful when the following interface is opened (the installation of different new versions may be slightly different, you can install it according to your own downloaded version), which is very similar to a Linux terminal.
If you use Git to write, you only need to right-click your blog folder and select Git Bash Here to open the interface as shown in the figure.
