How to make a website for your lab in one day

First of all, we introduce the new construction site Vqa-lib.github.io.

Why do I need to build a site?

I think the following two points are useful
-Promotion and sharing. Show your research results to the outside world without worrying about levels. High-level research naturally adds luster, and entry-level research can also point the way for newcomers.
-Records and inheritance. Everyone stays in the lab for at least two years, and the results of the reports, experiments, and studies that have been made are worth documenting, not only paving the way for Yimeimei's expanded research, but also avoiding the loss of data as people flow.

What tools are used to build the site?

There are several options:
-Take your own server, starting from 0 to do the site, and then buy a domain binding, too complex, time-consuming.
-WordPress: After all, is also the world's most used open source CMS system, is a good choice, the process of building is also known as a fool-style.
-GitHub page: a free site for hosting static web pages on GitHub, with free space and a lot of ready-made frames.

Here we choose GitHub pages, with the following considerations
-backed by GitHub, the world's best code base is here, there are many Daniel, broaden their horizons
-The process of building GitHub pages, and after the completion of a number of co-editors to maintain site content in the process of working with git that set of things to deal with, suitable for new students to learn, basic this set of processes can be completed at the same time git introductory teaching

The tools you need

• Hexo: A simple, fast and powerful static blogging framework. Can quickly and easily generate static pages, support Markdown, and rich plug-in support
• Git and GitHub: This goes without saying, it's necessary.
• Node.js:Hexo need to use a lot of node modules
• CMD markdown Editor: The content of GitHub pages needs to be written in markdown language, Markdown is a markup language that is extremely compatible and can be opened with all text editors because it is a plain text language that allows you to focus on text rather than typography. and format conversion is convenient, Markdown text you can easily convert to HTML, e-book, but also excellent readability. CMD markdown Editor is an online markdown editor with a common toolbar that can be imported to export local files, cloud storage, very convenient.
• Science Online: Be prepared.

Architecture Brief

Simply explain the architecture of this site

Site domain name for Vqa-lib.github.io's actual site, hosted by GitHub for us;
The content of static Web page is generated by Hexo framework, and some third-party plugins are needed to enrich the function of the site.
The theme of the site uses the next theme, which is more concise and generous than the native theme.
In order to facilitate the co-editing and maintenance of the site, the GitHub orgnization:vqa-lib is specifically built, and contains three code libraries in the Vqa-lib:
-Vqa-lib.github.io, corresponding site static web content
-Hexo, which corresponds to the framework of the generated content, the MD files written in Markdown that describe the contents of each page are in this library and contain theme content
-Hexo-theme-next:fork from, in the form of a submodule (submodule) in the Hexo code base, corresponding to the theme, that is, the appearance
The team was set up in Vqa-lib, the GitHub orgnization, and all members of the lab were invited, and only members of the team had permission to edit the code base.

Detailed setup steps under Windows

Here are two roles, one is to create a site, called the administrator, one is involved in the maintenance of people, called maintenance personnel.

Administrator

Step One: Register GitHub, create a orignization, create a new warehouse, build a team, add members

This is a simple step, and it's important to note that the repository name for GitHub page must be username.github.io.
I first created the GitHub account Cuc-mmteam in the name of the AV technology team, then created the Vqa-lib orgnization in the account, and then created Vqa-team in Vqa-lib to add the lab members. The Vqa-lib.github.io code base and the Hexo code base are also created, as for the Hexo-theme-next code base. The fork is from Https://github.com/iissnan/hexo-theme-next. What is fork? It can be simply understood to copy someone else's code base and make changes based on it.

Step Two: Install node. js and GitHub Desktop for Windows, configure Git

GitHub Desktop for Windows provides a visual interface for Git workflows for beginners to learn. After installation, you can find the Git shell in the Start menu, a git command-line tool, open it, and enter the following command to connect your local git project to a remote github
ssh-t [email protected]

Step Three: Install the configuration Hexo

Continue operating in the Git shell and enter the following command to install Hexo. NPM is the package Manager for node. js.

npm install hexo-cli -g

then enter

hexo init Hexo

At this point, you will find a git shell corresponding to the directory of a more Hexo folder. Some of the initialization files are included. In fact, this time has generated the site content, we can also preview. Input

hexo generate hexo server

As follows

Now open the browser, in the browser address bar type Http://localhost:4000/(the default port is 4000), you can see the most original blog. Later post blog want to preview first, also can through Hexo server on the local first run up, see effect. The most primitive effect is as follows

Fourth step: Correspond the local Hexo file to the Github.io.

Locate the _config.yml file under the Hexo folder, as shown in:

Locate the deploy tag, change it to the form shown, and save it. Note: Add a space after the colon, or you will get an error.

Note: In the current Hexo version, the type needs to be written in Git
Go back to git shell and install the required modules for your GIT deployment

npm install hexo-deployer-git --save

Re-enter

hexo cleanhexo generatehexo deploy

Can see the following content

At this point, the site has been deployed on GitHub, and by Vqa-lib.github.io (the name of your repository, "Your GitHub user name"), you can see the site.

Fifth step: Deploy Hexo local content to GitHub and install the next topic sub-module

In Hexo, there are three types of resources: source files (article data), subject resources, and configuration files, respectively, corresponding to the Hexo initialization directory. /source 、.. /themes and. /_config.yml. They are the core content of the constituent site and can be viewed as identical when the source files, subject resources, and configuration files of the two sites are consistent. For the realization of multi-person site co-editing and maintenance, the key is to maintain the three types of resources on more than one device consistency. Of course you can choose to copy these core content copies, but everyone knows that Hexo's blog site files are maintained on GitHub, after the release of new articles, modify or delete existing articles, Hexo is to call git to upload the updated site files to GitHub, This ensures that the content displayed on the Web page is always up to date. We use this approach to save Hexo source files to the cloud (Github) and synchronize updates to replace direct copies.
The process is: first upload the source files from the old device to GitHub, and then crawl and replace the source files in the new device. Next, whether it's on a new device or an old device, update the source file before blogging, and then write the article on an updated basis and upload the newly added content to GitHub after the release is complete. This makes it easy and accurate to update your blog on both devices. The devices mentioned here correspond to different editors. The specific steps are as follows:
First, assume that you have created the corresponding Hexo code base on GitHub.
Enter in the Git shell

git init                             #初始化本地仓库git add .                            #将当前目录所有文件添加到暂存区域    git commit -m "first commit"         #编辑提交信息git remote add origin your_repo_url  #添加远端git push -u origin master            #提交

Then go back to your GitHub page and see that the Hexo code base already contains the local content we just submitted.

Next we install the next topic sub-module. The module itself is an open source project, and we fork it into our own code base so that we can modify it according to our needs and merge the original author's updates. Also to enable multi-person co-editing, it is added as a submodule to the Hexo code base we created. Switch to the Hexo directory in the Git shell, enter

git submodule add your_next_theme_git_url themes/next

Then open your local file, you can see the Themes folder under the next folder, which is your theme. After executing git push, you can see that a new submodule has been added to GitHub.
Hexo has two major configuration files (_config.yml), one at the root of the site and the other under the theme directory. For ease of description, the former is referred to as the site configuration file, which is referred to as the subject profile, in the following instructions. Now open the Site configuration file, locate the theme field, and change its value to next. Follow the commands above and refresh your personal blog to see if the theme you set is enabled. Next you'll be able to refine your blog with reference to the next document.
After modifying the theme, you also need to commit the changes to the remote, which is simple, you need to do a git push in the Submodule directory, and then do a git push after switching to the parent directory.

Sixth step: Post the first article

We can use the command to create a new article, use Git Shell to enter the Hexo folder, enter the following command:

hexo new "文章题目"

Once the command is executed, you will find that there is one more file article name in the Hexo\source_posts directory. MD, this is the new article we just created.
Create a new article using the above method, the new page can also take the command:

hexo new page "页面名称"

After the command is executed, you will find a folder in the Hexo\source directory with a index.md, which means we have created a new page.
Open the new article above with a text editor, as shown in:

Three "-" is behind the text of the article, the next is serious to write the article. Because our articles are written in markdown language, so first of all, you need a good markdown editor, you can use the cmd markdown I said earlier. Markdown syntax specific see here for Markdown Tutorial: markdown--Getting Started guide.
After writing, execute

hexo clean      #修改了CSS之类的文件之后，需要执行clean，来清除缓存hexo generate(若要本地预览就先执行 hexo server)hexo deploy

Refresh your site to see freshly baked articles.
Finally, don't forget to do a git push to synchronize the remote after making the change.

Maintenance Personnel
It's easier for the maintenance staff.

Step One: Register your github account and apply to join Team
Step Two: Install node. js and GitHub Desktop for Windows, configure Git
Step Three: Install the configuration Hexo
These steps are the same as the previous steps of the Administrator role. Don't dwell on it.

Fourth step: Synchronizing local content and remote content

Enter in the Git shell

git init #初始化本地仓库git remote add origin your_hexo_repo_url  #添加远端git reset --hardgit clean -f -d    #把本地初始化的内容清理掉git pull your_hexo_repo_url master  #将远端内容拉取到本地，同步完成git submodule init  #初始化子模块本地仓库git submodule update  #更新子模块npm install hexo-deployer-git --save  #安装git 模块

The above steps only need to be done once. Not anymore.
At this point, you can follow the administrator steps like, new articles, generate, deploy and so on

Reference links
How to quickly build a personal blog using github pages and Hexo
Using Git submodule to manage sub-modules
How to synchronize a Github fork-out Branch
Hexo Transplant
On the cooperative development of GitHub in many people

How to make a website for your lab in one day