You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+42-31Lines changed: 42 additions & 31 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,70 +10,81 @@
10
10
</h1>
11
11
</div>
12
12
13
-
Handmade Blog is a classic static blog generator for people who want to start a blog quickly. It supports article type document for a blog post, work type document for portfolio, code highlights, [KaTeX](https://katex.org/) syntax, footnotes, and others.
13
+
Handmade Blog is a classic static blog generator for people who want to start a blog quickly. It supports article type document for a blog post, work type document for portfolio, code highlights, [KaTeX](https://katex.org/) syntax, footnotes, and more.
1. Click the 'Use this template' button above the file list to create a new repository. If you want to use github.io domain, have to name the repository `{YOUR_ID}.github.io`.
21
+
1. Click the 'Use this template' button above the file list to create a new repository. If you want to use github.io domain, have to name the repository `{YOUR_ID}.github.io`. (e.g., `betty-grof.github.io`) Don't forget to enable the 'Include all branches' option.
22
22
23
-
2. Clone this repository, and install node modules.
23
+
26
+
27
+
2. Click the 'Settings' tab in your repository, and set the source branch for GitHub Pages to `gh-pages` branch. GitHub Pages will host your website based on `gh-pages` branch. You'll be able to access the website via `https://{YOUR_ID}.github.io/` in a few minutes.
28
+
29
+
30
+
31
+
32
+
33
+
3. Clone the repository, and install node packages.
3. Please create `development` branch and follow [this document](https://help.github.com/en/github/administering-a-repository/setting-the-default-branch) to set the branch to a default. Because GitHub pages hosts the site based on `master` branch. In addition, separating `master` branch and `development` branch is a good practice!
32
-
33
41
4. Modify `config.json` file in`services` directory to set your blog title and subtitle.
34
42
35
43
```json
36
44
{
37
-
"blogTitle": "Lorem Ipsum",
38
-
"blogSubtitle": "lorem ipsum",
45
+
"blogTitle": "Betty Grof",
46
+
"blogSubtitle": "Oh My Glob",
39
47
"article": {
40
48
"tableOfContents": true
41
49
}
42
50
}
43
51
```
44
52
45
-
5. Start local server at `http://localhost:1234/`. `npm start` script opens local server based on `server` directory. It occurs an error because there aren't published articles and works pages yet.
53
+
5. Start a local server at `http://localhost:1234/`. `npm start` script opens the local server based on `server` directory.
46
54
47
-
```bash
55
+
```shell script
48
56
$ npm start
49
57
```
58
+
59
+
60
+
61
+
6. Commit and push the changes in your working directory to the remote repository.
50
62
51
-
6. Publish the example articles and works by `npm run publish`. It converts a markdown documents in `_articles` or `_works` directory to HTML files.
52
-
53
-
```bash
54
-
$ npm run publish article
55
-
$ npm run publish work
56
-
```
63
+
```shell script
64
+
$ git add ./services/config.json
65
+
$ git commit -m "Set the blog title and subtitle"
66
+
$ git push origin master
67
+
```
57
68
58
-
7. Run `deploy` script if you're ready to host a live server. This script builds local files to `dist` directory and pushes it to `master` branch that contains only the files in`dist` directory. GitHub will host live server at `https://{YOUR_ID}.github.io/` based on `master` automatically.
69
+
7. Run `deploy` script if you're ready to host a live server. This script builds local files to `dist` directory and pushes it to `gh-pages` branch that contains only the files in `dist` directory. GitHub Pages will host live server at `https://{YOUR_ID}.github.io/` based on `gh-pages` branch automatically.
59
70
60
-
```bash
71
+
```shell script
61
72
$ npm run deploy
62
73
```
63
74
64
75
## Usage
65
76
66
-
### Writing and publishing document
77
+
### Write and publish a document
67
78
68
79
1. Write a document in `_articles` or `_works` directory.
69
80
70
-
1. Run `npm run publish article` or `npm run publish work` script to convert markdown to HTML.
81
+
1. Run `npm run publish article` or `npm run publish work` script to convert markdown documents to HTML.
71
82
72
83
1. Preview converted document on the local server using `npm start` script.
73
84
74
-
1. Run`npm run deploy` to publish the document to live server.
85
+
1. Commit and push the changes to the repository, and run `npm run deploy` to publish the document to live server.
75
86
76
-
### Changing content of the page
87
+
### Change a page
77
88
78
89
Modify an ejs template to change the contents of the existing page. For example, if you want to put an image to the landing page, open the `app/templates/index.ejs` file, and add `img` tag to the `main-container` element.
79
90
@@ -86,13 +97,13 @@ Modify an ejs template to change the contents of the existing page. For example,
86
97
87
98
Then, run `npm run publish page` script to publish the modified landing page.
88
99
89
-
```bash
100
+
```shell script
90
101
$ npm run publish page
91
102
```
92
103
93
104
Done! You can change not only the landing page but any pages like this way. (You may need to understand the project structure.)
94
105
95
-
### Proejct structure
106
+
### Project structure
96
107
97
108
* `_articles` - Markdown files for the blog posts.
98
109
* `_works` - Markdown files for the portfolio.
@@ -128,31 +139,31 @@ Starts local development server at http://localhost:1234/.
0 commit comments