search.json

[{"title":"Getting Start Angular 2 (01)","url":"http://leihuagh.github.io/2017/03/17/getting-start-angular2/","content":"<h3 id=\"Step-1-Set-up-the-Development-Environment\"><a href=\"#Step-1-Set-up-the-Development-Environment\" class=\"headerlink\" title=\"Step 1. Set up the Development Environment\"></a>Step 1. Set up the Development Environment</h3><p>In my case, I would like to choose @angular/cli, install @agnular/cli into your computer globally.</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><div class=\"line\">1</div></pre></td><td class=\"code\"><pre><div class=\"line\">npm install -g @angular/cli</div></pre></td></tr></table></figure>\n<h3 id=\"Step-2-Create-a-new-project\"><a href=\"#Step-2-Create-a-new-project\" class=\"headerlink\" title=\"Step 2. Create a new project\"></a>Step 2. Create a new project</h3><ul>\n<li>Open Git bash terminal under “C:\\projects\\”</li>\n<li>Generate a new project and skeleton application by running the following commands:</li>\n</ul>\n<figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><div class=\"line\">1</div></pre></td><td class=\"code\"><pre><div class=\"line\">ng new my-app</div></pre></td></tr></table></figure>\n<h3 id=\"Step-3-Serve-the-application\"><a href=\"#Step-3-Serve-the-application\" class=\"headerlink\" title=\"Step 3: Serve the application\"></a>Step 3: Serve the application</h3><p>Go to the project directory and launch the server</p>\n<pre><code class=\"bash\"><span class=\"built_in\">cd</span> serve --open\n</code></pre>\n<ul>\n<li>The <code>ng serve</code> command launches the server, watches your files, and rebuilds the app as you make changes to those files </li>\n<li>Using the <code>--open</code> (or just <code>-o</code>) option will automatically open your browser on <a href=\"http://localhost:4200/\" target=\"_blank\" rel=\"external\">http://localhost:4200/</a></li>\n<li>Your app greets you with a message:</li>\n</ul>\n<p><img src=\"./images/angular2/heroes/app-works.png\" alt=\"App Works\"></p>\n","categories":[],"tags":["angular2","angular2_heroes"]},{"title":"Working with Images","url":"http://leihuagh.github.io/2017/03/17/working-with-images/","content":"<h3 id=\"Create-the-Post-with-Images\"><a href=\"#Create-the-Post-with-Images\" class=\"headerlink\" title=\"Create the Post with Images\"></a>Create the Post with Images</h3><p>A good practice when starting new posts is to use the “draft” feature. Drafts will not be published by default, so you are free to make changes to other posts while keeping unfinished drafts hidden from public.</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><div class=\"line\">1</div><div class=\"line\">2</div></pre></td><td class=\"code\"><pre><div class=\"line\">$ hexo new draft <span class=\"string\">\"working-with-images\"</span></div><div class=\"line\"><span class=\"comment\"># creates -&gt; ./source/_drafts/working-with-images.md</span></div></pre></td></tr></table></figure>\n<h3 id=\"Inserting-images\"><a href=\"#Inserting-images\" class=\"headerlink\" title=\"Inserting images\"></a>Inserting images</h3><p>Images and other asset files can be placed in subdirectories under the ./source/ folder. Use a picture downloaded from google images. In my case, I use Hexo logo. Download the picture into the path below,</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><div class=\"line\">1</div></pre></td><td class=\"code\"><pre><div class=\"line\">./<span class=\"built_in\">source</span>/_images/hexo_logo.png</div></pre></td></tr></table></figure>\n<h3 id=\"Adding-Image-Link-to-Draft-File\"><a href=\"#Adding-Image-Link-to-Draft-File\" class=\"headerlink\" title=\"Adding Image Link to Draft File\"></a>Adding Image Link to Draft File</h3><p>Edit your draft by adding the code below</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><div class=\"line\">1</div></pre></td><td class=\"code\"><pre><div class=\"line\">![Hexo Logo](./images/hexo_logo.png)</div></pre></td></tr></table></figure>\n<p><img src=\"./images/hexo_logo.png\" alt=\"Hexo Logo\"></p>\n<h3 id=\"Publishing-Drafts\"><a href=\"#Publishing-Drafts\" class=\"headerlink\" title=\"Publishing Drafts\"></a>Publishing Drafts</h3><p>When it’s time to move the draft to a “live” post for the world to see, use the hexo publish command:</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><div class=\"line\">1</div></pre></td><td class=\"code\"><pre><div class=\"line\">$ hexo publish working-with-images</div></pre></td></tr></table></figure>\n<p>A few things will happen when this command is run:</p>\n<ul>\n<li>The markdown file My-First-Blog-Post.md moves from ./source/_drafts/ to ./source/_posts.</li>\n<li>The file’s “front-matter” changes to include a publish date:</li>\n</ul>\n<h3 id=\"Generate-the-Static-File\"><a href=\"#Generate-the-Static-File\" class=\"headerlink\" title=\"Generate the Static File\"></a>Generate the Static File</h3><p>Finally, prepare the entire site for deployment. Run the hexo generate command:</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><div class=\"line\">1</div><div class=\"line\">2</div></pre></td><td class=\"code\"><pre><div class=\"line\">$ hexo generate </div><div class=\"line\"><span class=\"comment\"># generates -&gt; ./public/</span></div></pre></td></tr></table></figure>\n<h3 id=\"Next-Steps\"><a href=\"#Next-Steps\" class=\"headerlink\" title=\"Next Steps\"></a>Next Steps</h3><ul>\n<li>Update gitHub repository </li>\n<li>Detail way refer to Getting Start Page</li>\n</ul>\n","categories":["tutorials"],"tags":["hexo"]},{"title":"Getting Start with Hexo Blog","url":"http://leihuagh.github.io/2017/03/17/getting-start/","content":"<h3 id=\"Requirements\"><a href=\"#Requirements\" class=\"headerlink\" title=\"Requirements\"></a>Requirements</h3><p>Installing Hexo is quite easy. However, you do need to have a couple of other things installed first:</p>\n<ul>\n<li>Install <a href=\"https://nodejs.org/en/\" target=\"_blank\" rel=\"external\">Node.js</a>. Download right side one.</li>\n<li>Install <a href=\"https://git-scm.com/\" target=\"_blank\" rel=\"external\">Git</a>. Download the latest version</li>\n</ul>\n<h3 id=\"Installation-Process\"><a href=\"#Installation-Process\" class=\"headerlink\" title=\"Installation Process\"></a>Installation Process</h3><ol>\n<li>Create a “projects” folder under your C:\\</li>\n<li>In Windows Explorer, Navigate the “C:\\projects”</li>\n<li>Highlight “projects”, right-click to bring pulldown menu, select “Git Bash Here” to open the git bash.</li>\n<li>Do install Hexo into your computer by following the codes below</li>\n</ol>\n<figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><div class=\"line\">1</div></pre></td><td class=\"code\"><pre><div class=\"line\">$ npm install -g hexo-cli</div></pre></td></tr></table></figure>\n<h3 id=\"Initializatng-a-blog\"><a href=\"#Initializatng-a-blog\" class=\"headerlink\" title=\"Initializatng a blog\"></a>Initializatng a blog</h3><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><div class=\"line\">1</div><div class=\"line\">2</div></pre></td><td class=\"code\"><pre><div class=\"line\">$ hexo init blog</div><div class=\"line\">$ <span class=\"built_in\">cd</span> blog</div></pre></td></tr></table></figure>\n<h3 id=\"Editing-the-Overall-Configuration-File\"><a href=\"#Editing-the-Overall-Configuration-File\" class=\"headerlink\" title=\"Editing the Overall Configuration File\"></a>Editing the Overall Configuration File</h3><h4 id=\"Turn-on-the-server-in-watch-to-watch-the-changes\"><a href=\"#Turn-on-the-server-in-watch-to-watch-the-changes\" class=\"headerlink\" title=\"Turn on the server in watch to watch the changes\"></a>Turn on the server in watch to watch the changes</h4><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><div class=\"line\">1</div></pre></td><td class=\"code\"><pre><div class=\"line\">$ hexo server --watch</div></pre></td></tr></table></figure>\n<h4 id=\"Config-the-site-general-information\"><a href=\"#Config-the-site-general-information\" class=\"headerlink\" title=\"Config the site general information\"></a>Config the site general information</h4><ol>\n<li>I am using Visual Studio Code </li>\n<li>Open “C:\\projects\\blog\\” folder in VS Code </li>\n<li>Open “_config.yml” file under blog root directory</li>\n<li>Customize the site general settings by your info.  Below are my settings</li>\n</ol>\n<figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><div class=\"line\">1</div><div class=\"line\">2</div><div class=\"line\">3</div><div class=\"line\">4</div><div class=\"line\">5</div><div class=\"line\">6</div><div class=\"line\">7</div><div class=\"line\">8</div><div class=\"line\">9</div></pre></td><td class=\"code\"><pre><div class=\"line\">title: 迷彩网后博客园</div><div class=\"line\">subtitle: 网阔凭余跃, 云高任偶飞</div><div class=\"line\">description: This is my GitHub blog home</div><div class=\"line\">author: Lei Hua</div><div class=\"line\">language:   </div><div class=\"line\">  - en</div><div class=\"line\">  - zh-cn</div><div class=\"line\">  - zh-tw</div><div class=\"line\">timezone: America/New_York</div></pre></td></tr></table></figure>\n<h4 id=\"Config-the-deployment-information\"><a href=\"#Config-the-deployment-information\" class=\"headerlink\" title=\"Config the deployment information\"></a>Config the deployment information</h4><ol>\n<li>Customize deployment info on your side.  Below are the sample of mine</li>\n</ol>\n<figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><div class=\"line\">1</div><div class=\"line\">2</div><div class=\"line\">3</div><div class=\"line\">4</div></pre></td><td class=\"code\"><pre><div class=\"line\">deploy:</div><div class=\"line\">  <span class=\"built_in\">type</span>: git</div><div class=\"line\">  repo: https://github.com/leihuagh/leihuagh.github.io.git</div><div class=\"line\">  branch: master</div></pre></td></tr></table></figure>\n<h3 id=\"Deploy-to-remote-sites\"><a href=\"#Deploy-to-remote-sites\" class=\"headerlink\" title=\"Deploy to remote sites\"></a>Deploy to remote sites</h3><p>If you think the <a href=\"http://localhost:4000\" target=\"_blank\" rel=\"external\">http://localhost:4000</a> results are what you want, the next step is delopy them into GitHub </p>\n<h4 id=\"Create-a-repository-on-your-GitHub-account\"><a href=\"#Create-a-repository-on-your-GitHub-account\" class=\"headerlink\" title=\"Create a repository on your GitHub account\"></a>Create a repository on your GitHub account</h4><ul>\n<li>Go to your GitHub home to create a new repository</li>\n<li>In my case, I created a repository called “leihuagh.github.io”</li>\n</ul>\n<h4 id=\"Generate-the-static-HTML-files\"><a href=\"#Generate-the-static-HTML-files\" class=\"headerlink\" title=\"Generate the static HTML files\"></a>Generate the static HTML files</h4><p>Run the code below to generate all of the HTML files into a generated folder called “public”</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><div class=\"line\">1</div></pre></td><td class=\"code\"><pre><div class=\"line\">$ hexo generate</div></pre></td></tr></table></figure>\n<p>After executing generate command, the new folder called “public”, which contains all of the site files, will be generated</p>\n<h4 id=\"init-git-in-public\"><a href=\"#init-git-in-public\" class=\"headerlink\" title=\"init git in public\"></a>init git in public</h4><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><div class=\"line\">1</div><div class=\"line\">2</div><div class=\"line\">3</div><div class=\"line\">4</div><div class=\"line\">5</div></pre></td><td class=\"code\"><pre><div class=\"line\">$ <span class=\"built_in\">cd</span> public </div><div class=\"line\">$ git init</div><div class=\"line\">$ git add --all </div><div class=\"line\">$ git commit -m <span class=\"string\">\"Initializing blog\"</span></div><div class=\"line\">$ git status</div></pre></td></tr></table></figure>\n<h4 id=\"Public-the-contents-to-GitHub\"><a href=\"#Public-the-contents-to-GitHub\" class=\"headerlink\" title=\"Public the contents to GitHub\"></a>Public the contents to GitHub</h4><p>Now, I am ready to send all of the folders and files under public folder to GitHub repository</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><div class=\"line\">1</div><div class=\"line\">2</div></pre></td><td class=\"code\"><pre><div class=\"line\">$ git remote add origin https://github.com/leihuagh/leihuagh.github.io.git</div><div class=\"line\">$ git push origin master</div></pre></td></tr></table></figure>\n<p>If git push command gets failure, you can add option: –force</p>\n<figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><div class=\"line\">1</div></pre></td><td class=\"code\"><pre><div class=\"line\">$ git push origin --force</div></pre></td></tr></table></figure>\n<h4 id=\"View-Your-GitHub-Glog-home\"><a href=\"#View-Your-GitHub-Glog-home\" class=\"headerlink\" title=\"View Your GitHub Glog home\"></a>View Your GitHub Glog home</h4><p>Open your browser and access https://<your github=\"\" account=\"\" name=\"\">.github.io/</your></p>\n","categories":["tutorials"],"tags":["hexo"]},{"title":"Hello World Hexo Blog","url":"http://leihuagh.github.io/2017/03/16/hello-world/","content":"<p>Welcome to <a href=\"https://hexo.io/\" target=\"_blank\" rel=\"external\">Hexo</a>! This is your very first post. Check <a href=\"https://hexo.io/docs/\" target=\"_blank\" rel=\"external\">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href=\"https://hexo.io/docs/troubleshooting.html\" target=\"_blank\" rel=\"external\">troubleshooting</a> or you can ask me on <a href=\"https://github.com/hexojs/hexo/issues\" target=\"_blank\" rel=\"external\">GitHub</a>.</p>\n<h2 id=\"Quick-Start\"><a href=\"#Quick-Start\" class=\"headerlink\" title=\"Quick Start\"></a>Quick Start</h2><h3 id=\"Create-a-new-post\"><a href=\"#Create-a-new-post\" class=\"headerlink\" title=\"Create a new post\"></a>Create a new post</h3><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><div class=\"line\">1</div></pre></td><td class=\"code\"><pre><div class=\"line\">$ hexo new <span class=\"string\">\"My New Post\"</span></div></pre></td></tr></table></figure>\n<p>More info: <a href=\"https://hexo.io/docs/writing.html\" target=\"_blank\" rel=\"external\">Writing</a></p>\n<h3 id=\"Run-server\"><a href=\"#Run-server\" class=\"headerlink\" title=\"Run server\"></a>Run server</h3><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><div class=\"line\">1</div></pre></td><td class=\"code\"><pre><div class=\"line\">$ hexo server</div></pre></td></tr></table></figure>\n<p>More info: <a href=\"https://hexo.io/docs/server.html\" target=\"_blank\" rel=\"external\">Server</a></p>\n<h3 id=\"Generate-static-files\"><a href=\"#Generate-static-files\" class=\"headerlink\" title=\"Generate static files\"></a>Generate static files</h3><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><div class=\"line\">1</div></pre></td><td class=\"code\"><pre><div class=\"line\">$ hexo generate</div></pre></td></tr></table></figure>\n<p>More info: <a href=\"https://hexo.io/docs/generating.html\" target=\"_blank\" rel=\"external\">Generating</a></p>\n<h3 id=\"Deploy-to-remote-sites\"><a href=\"#Deploy-to-remote-sites\" class=\"headerlink\" title=\"Deploy to remote sites\"></a>Deploy to remote sites</h3><figure class=\"highlight bash\"><table><tr><td class=\"gutter\"><pre><div class=\"line\">1</div></pre></td><td class=\"code\"><pre><div class=\"line\">$ hexo deploy</div></pre></td></tr></table></figure>\n<p>More info: <a href=\"https://hexo.io/docs/deployment.html\" target=\"_blank\" rel=\"external\">Deployment</a></p>\n","categories":["tutorials"],"tags":["hexo"]}]