This is the third in a set of three turtorials on how to setup a Hexo blog site.

• How to install hexo onto your computer and how to publish your first post
• How to host your site on s3
• How to store your code in github and enable continuous deployment using CircleCI on commits

In this tutorial we will be going over how to keep our code stored on github and how to have our site deployed each time we push our code to github using a service called CircleCI. As usual lets breakdown some of terms.

Github is an online service that allows you to store your code online, including multiple versions of it. This is one of the latest wrappers around the git version control system, with the other being Gitlab. What is great about these is that as long as you have an internet connection you can pull down any of your code no matter where you are or what machine you are using. The second great thing is that you can attach other services to be notified when you push your code and have them perform tasks, this is where CircleCI comes in.

CircleCI helps with the process of you guessed it Continuous Integration. Continuous Integration is the continued testing and building of code as it is being changed on each commit. A commit is the chunk of code changes that you have sumbitted to github since you last committed, pushed up your code.

To signup for Github which you will need for the tutorial please go to the following link. Pick out a sweet username and get started. Once you have that done you can go about pushing your code up to your first repository. On your user page at ‘https://github.com/user-name' look for the plus in the top right near your avatar and select new repository. From there you can name your repo/project and choose whether it is going to be public or private. Eventually if you are working on some projects you will probably want to get a paid account so that you can have private repos. Then proceed to the next page which will direct you on how to push up your code. I would suggest that you do the following though since you already have a project directory. Go into that project directory and then issue the following commands:

1
2
3

git init
git remote add origin git@github.com:<username>/<repo-name>.git
git push -u origin master

At this point you can go to the repo page and you should see all of the code in your project directory shown.

Now it’s time to get an account setup on CircleCI, click this link and signup. From there you can go to their integrations page and see how to attach it to build your project on github after each build. You will need to add a circle.yml file to the root of your project directory of your hexo site. Here is a sample below for your circly.yml file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

## Customize the test machine
machine:

  timezone:
    America/Los_Angeles # Set the timezone

## Customize dependencies
dependencies:
  override:
    - npm install
    # - npm install -g hexo
    - npm install -g hexo-cli

## Customize test commands
test:
 override:
   - echo "testing"

## Customize deployment commands
deployment:
  prod:
    branch: master
    commands:
      - hexo clean
      - hexo generate
      - aws s3 sync public/ <s3://your-s3-bucket.com/>

What is great about this is that once you have it configured each time you push your code to github you can have it automatically be deployed to your site so that it stays updated as you push out new content.

We are now concluded with this tutorial series on how to host a static hexo site on s3 with circleci integration. You have learned how to use the basics of hexo, how to host a static site via s3 and how to have your site deployed automatically after each change is pushed. Thanks for reading and best of luck in your creating.

This is the second in a set of three turtorials on how to setup a Hexo blog site.

• How to install hexo onto your computer and how to publish your first post
• How to host your site on s3
• How to store your code in github and enable continuous deployment using CircleCI on commits

What is a Static Site

Before we go further in this set of tutorials we need to go over a few terms and ideas, the first of which is static sites. In the world of websites there are two kinds of websites, static and dynamic. Static sites are sites that have content that does not change, no matter who goes to the site they all recieve the same content. Dynamic sites are sites where the content may change depending on how a user interacts with it. For instance, in a dynamic site such as Twitter different content depending on which user is logged on and which accounts you are following. Hexo is a static site generator, you write your blogs posts in markdown and out comes HTML, CSS, and Javascript. These are then downloaded by people when they visit your site in a browser. Static sites are known for their reliablity and smaller file sizes resulting in faster downloads.

AWS S3

AWS has a storage service called s3, short for Simple Storage Service. It is used to store and receive files, it is highly scalable in terms of its ability to both send and receive files. This is helpful for hosting static sites as it allows for quick and efficient delivery from a stable scalable source. Some uses that I have had for s3 are hosting this site, storing files for retrieval/backups, storing user profiles, and as a central storage for files needed by team members.

Route 53

Route 53 is a” is a highly available and scalable cloud Domain Name System (DNS) web service”, as stated on their homepage. It is tightly integrated with their products and can allow you to route user requests to other AWS services that you are using such as the s3 bucket that we will be using to host our site. On top of being used for routing for our bucket it is also the service used primarily for the routing of requests to an AWS EC2 instace, an on demand virtual private server service that aws offers if you are ever in the need to host projects or dynamic sites.

AWS Command Line Tools (CLI)

AWS provides a nice suite of command line tools that allows you to interact with their services. This is helpful when it comes to automating the deployment of your site to s3 and in most things that you want to do at scale. If you are automating a process that involves AWS and you have not interacted with the cli tool directly then the underlying tool most likely wraps the AWS cli or their API. To begin with the AWS cli we must first install it, please ensure that you have pip installed:

1

pip install awscli --upgrade --user

After the above runs let’s ensure that it has been installed by running the following command:

1

aws --version

Now that the cli is installed we must configured it so that it is connected with our AWS account this is done through the following steps:

1. Open up the AWS console in your web browser
2. Navigate in the to iam service
3. Generate a new iam user by clicking on users
4. Under users click add user
   • Under user input ‘personal-blog’ or something similar for the user name
   • Click programmatic access for the access type
5. Under permissions attach existing policy directly and choose AmazonS3FullAccess
6. Then review and complete
7. You will now be displayed with some credentials for this user, they consit of an Access Key ID and a Secret Access Key, hold on to these as we will need them to configure your AWS cli
8. Using the credentials that you received above issue the following command and insert your credentials, when it asks for region specify us-west-2 or another if you need to, and for output format hit enter

   1	aws configure

Now your AWS cli should be setup for you and you can continue with the tutorial.

Setup of s3 bucket for hosting and Route 53 for routing

After around a week of trying to prep a better tutorial for how to host through s3 I realized that what AWS had was pretty good but the prefacing info that they gave was not really there so in this tutorial I have given the prefacing material. Please continue further with the AWS s3 hosting tutorial and then return for how to deploy to the s3 bucket using a script.

Script for deploying new changes to s3

I’m a big fan of automation scripts for anything that I have to do more than once, this applies not only to work but also with presonal projects such as this blog. So with that I would like to give you guys a script that will allow you to be a bit more efficient with your time in your blog. This script builds the hexo static files and then uploads them to your s3 bucket. To run it please ensure that your AWS cli is configured and run what is below:

1
2
3

hexo clean
hexo generate
aws s3 sync public/ s3://<your-bucket-name>

Hope that this tutorial has been helpful and that you now have a new public facing blog. Come by for the next one which will go over how to have your site automatically deployed through the use of CircleCI.

This is to be the first of a series of tutorials on how to setup a Hexo blog site. The tutorials will teach you:

• How to install hexo onto your computer and how to publish your first post
• How to host your site on s3
• How to store your code in github and enable continuous deployment using CircleCI on commits

To begin this tutorial I am going to show how to get Hexo setup on a Mac, as that is what I have used to develop on so far. One of the first things that you will need to do is to install Node.js and XCode if you have not already done so on your Mac, if you are developing you may have already done so. If you already have Node.js and XCode installed then skip ahead to the install Hexo section. To install XCode please go to the App Store and do so, the link will take you to its page.

This download may take some time but it is necessary for us to then get Homebrew, a package manager for Mac, installed. Homebrew allows for easier managment of packages and programs on your Mac. More info on Homebrew can be found on their site. To install homebrew they have provided a helpful ruby script for us that is listed below, just open up a terminal session enter the following:

1

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Once homebrew has been installed then we can install Node. To install node with homebrew we issue the following command in the terminal:

1

brew install node

Simple as that we will now have Node installed. To ensure that it is installed and to get you a bit more familiar with Node enter the following commands:

1
2

node -v
npm -v

These command will output the version of Node that you currently have installed and the version of NPM that is installed. NPM is a package manager for Node, it takes care of handling the different javascript libraries/packages that you will be using with Node such as Hexo.

Now that Node is installed and you have access to NPM, Hexo can be installed and your first blog can be created by using the following commands.

1
2
3
4

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

Running hexo server starts up your blog on your local machine allowing you to see what your blog posts and site will look like. This will not be available for the public to see but will allow you to test on your local network before you deploy to a hosting platform. We will go over how to upload and host your site from s3 in a future tutorial.

Now that you have created your blog it’s time to add your first post. To do so you will need to issue the following command in the terminal:

1

hexo new post <post_title>

Where there is <post_title> put the name of your blog post title. This will create a new post for you and can be found at \blog\folder\source\_posts\<post_title>.md. This file is written in a flavor of markdown language. A markdown language is a language that allows you to define the structure and appearance of your text through a specific syntax. The use of Markdown for writing blog posts allows for the text that you write to then be converted into HTML which will then be ready to be served by your site. For you first blog post open the <post_title.md> file and write the following:

1
2
3
4
5
6
7
8
9
10

---
title: First Blog Post
date: 2017-10-01 22:03:26
tags:
- projects
- blog
- hexo
---

My First Hexo Post

Now save this file and run the command hexo server and go to localhost:4000 in your browser. On the front page of your blog you will now be able to preview your first blog post.

You did it and have now created your first Hexo blog and blog post. Check back for the followup tutorials where I will show you how to have your site hosted on s3 so that the world can see it and then later have it deployed automatically after you write a new post. Best of luck making.

– Allen

I have not posted in a while but there are a few things that have been done with the site since then along with other projects that have been worked on. These include the following:

• easy deploy scripts for this static hexo site
• static site hosting on s3, great for cheap hosting
• the creation of an Alexa skill, Wise Sayings

Along with the hiking adventure part of this site I will also be adding a projects section. With the project section I am hoping to showcase and help along others who are trying to create. The first project was the Alexa skill that was created with AWS lambda and node.js. The second project that will be listed is the Florida Man Newsletter.

The Florida Man Newsletter is a concept that I have been thinking on for awhile it will be a curated newsletter of the best subjective florida man stories that I can find delivered to individuals who subscribe on either a weekly or biweekly basis. With this project I am hoping to learn more about scraping in go as well as get more accustomed to a few interesting integrations with an email service provider and a payment provider such as stripe. Hopefully the progress and musing posted here can help some others out as well. Alongside this main project I will also be posting about some utilities that I make along the way and some other tangential services make for the lolz. Best of luch in your creating.

This is my first blog post on here. It will be a personal blog about some of the things
that I am working on and trips that I take.

I went out to Joshua Tree this past week with a few guys I’ve been friends with since junior high.
We went camped out at Jumbo Rocks as it was the only place we could find a
group of people that would share a camp ground with us as all of the camping sites were full.
When we arrived at the park we asked a ranger about the the camp sites and she stated that
all the sites had been full for the past 3 weeks as all the desert flowers had bloomed from
the winter rains.

So for our duration at the park we went to hike around for most of the day and then hungout around camp
once it got dark as it was pitch black and the winds had kicked up quite a bit.
When we were bouldering some of the winds got pretty crazy and in the reports that
we had seen on the news the day after stated that some of the winds were justs up to 70mph.
The winds made it a blast to sleep in a tent but it was good that we had one since there
was also some rain in the early morning hours. It was intersting though as the only signs of the rain
left in the morning were the streaks and droplet marks on the car windows.

Overall I would say that it is an amazing park to come and visit. It has such a beautiful landscape
and so many creatures. The rock formations are awesome and the rocks themselves have a texture that is different from most.
If you have time go check it out for a weekend.