diff --git a/source/_posts/how-to-create-a-hexo-blog.md b/source/_posts/how-to-create-a-hexo-blog.md index a365abf..f65075f 100644 --- a/source/_posts/how-to-create-a-hexo-blog.md +++ b/source/_posts/how-to-create-a-hexo-blog.md @@ -5,14 +5,14 @@ tags: --- Create a website/blog (hosted by [GitLab](https://about.gitlab.com/features/pages/) for free) using the following guide: -## Create a new GitLab project +## GitLab project 1. Register a free [GitLab](https://gitlab.com/users/sign_in#register-pane) account or use your current one. 2. Fork this project. -3. Ensure Shared Runners is enabled. Go to your (forked) project `Settings -> CI / CD -> Shared Runners`. +3. Shared Runners should be enabled. Go to your (forked) project `Settings -> CI / CD -> Shared Runners`. 4. Change project website to a user website. This is so that the website's home page is `.gitlab.io/`, instead of `.gitlab.io/hexo`. Go to `Settings -> General -> Advanced -> Rename repository`. Change the Path to `.gitlab.io`. -5. If you just want to use a similar layout as this blog, or you're not planning to customize it, you don't have to [install](#installation) Hexo. You still need to change the blog's name and favicon though ([how-to](#naming). - 1. To create a new post (*without* using [Hexo](https://hexo.io/docs/writing)), create a new `.md` in the [source/_posts](source/_posts) folder. +5. You can start writing a new post straightaway without [installing](#installation) Hexo. You still need to change the blog's name and favicon though ([how-to](#naming). + 1. To create a new post (through GitLab.com), create a new `.md` file in `source/_posts` folder. 2. Start with the following header/[front-matter](https://hexo.io/docs/front-matter): ``` --- @@ -23,15 +23,15 @@ Create a website/blog (hosted by [GitLab](https://about.gitlab.com/features/page --- ``` 3. Write your post after the second `---` using [Markdown](https://about.gitlab.com/handbook/product/technical-writing/markdown-guide/) [style](https://docs.gitlab.com/ee/user/markdown.html). -6. After you create a new post, the website would be available on `.gitlab.io/` or the link shown on your project `Settings -> Pages`. +6. After you create a new post, the website can be accessed on `.gitlab.io/` or the link shown on your project `Settings -> Pages`. ## Installation -1. Having Hexo means you can debug locally, rather than waiting for gitlab runner. You can even run a local server to preview your blog (see step 6 below). +1. Having Hexo means you can debug locally, rather than waiting for [CI](https://docs.gitlab.com/ee/ci/). You can even run a local server to preview your blog (see step 6 below). 2. Clone this project to your workstation. Change `` to a preferred name. ```bash $ git clone https://gitlab.com/curben/curben.gitlab.io ``` -3. Install Node.js 10. +3. Install Node.js 10. Other distro, see this [guide](https://nodejs.org/en/download/package-manager/) or [here](https://github.com/nodesource/distributions). ```bash # Installing npm will also install nodejs as dependency. # Ubuntu 16.04 or newer @@ -47,11 +47,10 @@ $ sudo yum -y install nodejs # Arch Linux $ sudo pacman -S npm ``` -For other distro, see [here](https://nodejs.org/en/download/package-manager/) or [here](https://github.com/nodesource/distributions). -4. Install Hexo and its dependencies (defined in [package.json](package.json)). +4. Install Hexo and its dependencies (defined in `package.json`). Re-launch the terminal program before continue. ```bash -$ sudo npm install -g hexo-cli $ cd +$ sudo npm install -g hexo-cli $ npm install ``` 5. Generate static files to check for any error. You should always do this before pushing/merging commits to the `master` branch. @@ -63,16 +62,16 @@ $ hexo generate $ npm install hexo-server --save $ hexo server ``` -7. Commit the changes and push them. The generated `public` and `node_modules` are [ignored](.gitnore), as GitLab runner will generate them by itself. -8. Check the build status by going to your project `CI /CD -> Pipelines`. Due to the limitation of `hexo`, the build will always pass even when error occurred. Check the Jobs log, look for any error in `$ hexo deploy`. -9. If there is no error, the generated website would be available on `.gitlab.io/` or the link shown on your project `Settings -> Pages`. +7. Commit the changes and push them. The generated `public` and `node_modules` are [ignored](https://gitlab.com/curben/curben.gitlab.io/blob/master/.gitignore), as CI will generate them during build. +8. Check the build status by going to your project `CI /CD -> Pipelines`. Due to the limitation of `hexo`, the build will always pass even when there is error. Check the Jobs log, look for any error after `$ hexo deploy`. +9. If there is no error, the generated website can be accessed on `.gitlab.io/` or the link shown on your project `Settings -> Pages`. ## Writing 1. Create a new post (using Hexo) ``` bash $ hexo new "My New Post" ``` -2. `My-New-Post.md` is saved to the [source/_posts](source/_posts) folder, with the following header/[front-matter](https://hexo.io/docs/front-matter): +2. `My-New-Post.md` is created to the `source/_posts` folder, with the following header/[front-matter](https://hexo.io/docs/front-matter): ``` --- title: My New Post @@ -88,14 +87,14 @@ To create a new page or more info: [Writing](https://hexo.io/docs/writing.html) ## Configuration ### Naming Change the website's author and name -[_config.yml](_config.yml): +`_config.yml`: ```yml title: subtitle: description: author: ``` -[themes/typing/_config.yml](themes/typing/_config.yml): +`themes/typing/_config.yml`: ```yml menu: GitLab: @@ -107,8 +106,8 @@ description: ### Favicon [RealFaviconGenerator](https://realfavicongenerator.net/) provides a web-based tool to generate favicons with wide compatibility. 1. Upload your favicon (at least 260x260) and configure however you want. -1. Install the generated package to [favicons](themes/typing/source/favicons/) folder. -1. Edit [head.ejs](themes/typing/layout/_partial/head.ejs). Change the `color` values of `mask-icon` and `msapplication-TileColor` to the values you configured on the generator. +1. Install the generated package to `themes/typing/source` folder. Make you replace all existing files. +1. Edit `themes/typing/layout/_partial/head.ejs`. Change the `color` values of `mask-icon` and `msapplication-TileColor` to the values you configured on the generator. 1. Check for any error using `hexo generate` (you should do this *before* you push any commit). 1. Commit and push. 1. Check your favicon with the [favicon checker](https://realfavicongenerator.net/favicon_checker). @@ -116,7 +115,7 @@ description: ### Project page If you prefer to have a project page on GitLab: 1. go to `Settings -> General -> Advanced -> Rename repository`. Change the Path to ``, so the website is available at `.gitlab.io/`, `` can be any name, like `blog` or `hexo`. -1. Edit [_config.yml](_config.yml), change the `root:` value from `""` to `"/