Why blog?
Dou Liu
 2021-10-21 09:55:19    649 Words  4 Mins

Why Do I Need the Blog

Having my personal blog is always on my to-do-list but with lower priority. As the time of graduating approaching, I realized it is the best time to do it now, as I should get prepared of my previous work and project collection for job application, so why not? Not to mention I could share my learning progress, technics, results and mistakes I made with much more people here.

Hexo and Github Pages

I do not want to spend too much time choosing the technology or service to use and building the site. So finally hexo and github pages seem to be a solution

What is Hexo

Hexo is a fast, simple and powerful blog framework. You write posts in Markdown (or other markup languages) and Hexo generates static files with a beautiful theme in seconds .

Build Local Static Website First

Here, we first need to build a local static website before we make it public and accessible to Internet. Type commands below in Command Line

npm install hexo-cli -g
hexo init blog
cd blog
npm install 
hexo server

With this, the server is host on our localhost with port 4000. Open http://localhost:4000/ to check it.

Command

To add a page or post, the layout could be page, post and title looks like "My new post".

hexo new [layout] <title>

Deploy Website on Github Pages

First, create a new repo with name <github-username>.github.io.

Then install the plugin `hexo-deployer-git by

npm install hexo-deployer-git --save

and then change the configuration by opening blog/_config.yml and add following code:

deploy:
    type: git
    repo: https://github.com/<github-username>/<github-username>.github.io.git
    branch: <branch you want to deploy>

After finishing steps above, run following commands to generate static files and deploy them to the github pages:

hexo generate
hexo deploy

Congratulation

Now open https://<github-username>.github.io and you should see your own blog!

Extented

How to embed a PDF in the page

Adobe offers a embed API to make your PDF embedded in a HTML page.

First, log in and create a credential to use, specify the domain as the link of your blog, for me douliu95.github.io.

Then check a demo, there are four kinds of embed mode to choose:

  • full window
  • sized container
  • in-line
  • lightbox

I use in-line mode since I want to embed my cv, which is only one page long. Then, click generate code and get a sample code:

<div id="adobe-dc-view"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
	document.addEventListener("adobe_dc_view_sdk.ready", function(){ 
		var adobeDCView = new AdobeDC.View({clientId: "**********you id**********", divId: "adobe-dc-view"});
		adobeDCView.previewFile({
			content:{location: {url: "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Summary.pdf"}},
			metaData:{fileName: "Summary.pdf"}
		}, {});
	});
</script>

Then we copy this code to the markdown file of the page we want to embed with, and then we replace the url under content to my pdf link and change the fileName.

Now the pdf is embedded in the page.

How to automatically adjust the size of image in post?

To make a image or picture look good both on PC browser or mobile device, it is necessary to make the size of image adjust automatically.

Using the template under when inserting a image:

<div align="center"><img src="your image's url" alt="name" style="width: 100%;max-height: 100%" /> </div>

With this style="width: 100%;max-height: 100%, it should work now.

 Comments