This is
Carl Lee's Blog

How i setup this blog

To be honest, really don't know which is the best topic for my first github blog post.

I think it is a good idea to share how i set up my the github pages. Although there are a lot of tools for creating the blog like using FE lib or CRA or gatsbyJS, my way is quite simple. Check this out :)

My purpose is just for creating some static pages to be hosted in the github server. And it should be easy to create new posts, maybe need to upload some screenshots or code snippet & highlights.

• Setup the github pages

First, you need a github account. Then you need to create repo with the name like `{yourGithubName}.github.io`



Then go to the settings of your project, you can select `gh-pages-branch` as your blog site repo branch.

• Build your templates

Actually, there are a lot of ways of doing this. I am using HTML5up to generate my site. Why i am using ? Free and easy download, well... just let me get out of those FE auto-building tools like webpack or other stuff atm, I just want static HTML...



Alternatively, you can try setting up a github pages with Jekyll

After make some modification on my files, then use git to push your into your `{yourGithubName}.github.io`


• Add code highlights

Well, this is a FE blog for sharing some thoughts and idea about techiniques right?

So, we need to support code highlight. Then you can PrismJS, https://prismjs.com/ Select your option for programming language supporting, then download the css file and js file. Import css file and js file into your repo. The syntax will be like this.

• Add code generator

After above was done, i was thinking about to create post pages using some CMD line. Because we may frequently update our blog site with publishing the new blog post, or generate some new pages. We can plopJS to do that. https://plopjs.com/

I am not using package.json for this static website. Because I already installed plop in global level. `npm i plop -g --save`.

All i need to do is creating plopfile.js file for config the plop js cmd line

										
module.exports = function (plop) {
	// controller generator
	plop.setGenerator('post', {
		description: 'page template `post` logic',
		prompts: [
			{
				type: 'input',
				name: 'name',
				message: 'post file html name please'
			},
			{
				type: 'input',
				name: 'date',
				message: 'date please (April 25, 2017)'
			},
			{
				type: 'input',
				name: 'title',
				message: 'specify blog title'
			},
			{
				type: 'input',
				name: 'des',
				message: 'des please'
			},
		],
		actions: [{
			type: 'add',
			path: 'post/{{name}}.html',
			templateFile: 'plop-templates/post.hbs'
		}]
	});
};
											
											
										
									

Also, you need to specify the page template with handlebars templates. The {} is the variable where the value will be passed in through cd line.



So when next time, we can use cmd line to create pages

That's pretty much for my first blog post. It is simple way to create this github page, hope you guys can enjoy.