Learning Next.js


I'm a huge fan of [GitHub Actions](https://github.com/features/actions). They're so simple but so effective at doing such a broad range of things. In short, you can tell GitHub do something on a computer everytime you push to your repository (or to a branch on a specific repository like the `main` branch).

For today's post, I'll focus on how I used an action to automate deploying my static site built with Next.js to [GitHub Pages](https://pages.github.com).

I made this blog on a repository hosted on GitHub and added a GitHub Action to compile the JavaScript/React code into static HTML files. This really didn't require all that much effort.


Here's what I had to do:

1. Build a Next.js blog following the [detailed tutorial](https://nextjs.org/learn/basics/create-nextjs-app) and store the code on a GitHub repository
2. Create a workflow file in the repository with the following path: [**./github/workflows/integrate.yml**](https://github.com/franciscojavierarceo/franciscojavierarceo.github.io/blob/main/.github/workflows/integrate.yml)
3. Specify that workflow file to export the static files whenever I push to **main** and *commit* the exported files to a separate branch called **gh-pages** (you can just follow the workflow file I used)
4. Manually add a **.nojekyll** file to the **gh-pages** branch (this is to resolve [this bug](https://github.com/vercel/next.js/issues/2029))
5. Configure my repository Settings so that it sources the GitHub Pages build from the **gh-pages** branch

And that's it, adding new blog posts is as simple as creating a new [markdown](https://www.markdownguide.org/) file and pushing to the **main** branch. The GitHub Action will handle all of the rest!

This is much nicer in behavior than my old site, which was built using Jekyll (a Ruby framework) and it's much less work than building a full application with Django to get high quality page loads. I’d add that I’m a huge fan of Django but I think for a static, fast, and lightweight site, Next.js my new go to!

GitHub Actions to Deploy a Static Site built with Next.js

Deploying a Next.js Site using Github Actions


In the spirit of my last blog post talking about learning new things, I decided to learn <a href="https://nextjs.org/">Next.JS</a>, which is a JavaScript framework built on top of <a href="https://reactjs.org/">React</a> for web development. One of the main reasons I was particularly interested in Next.JS was because of it's opinionated optimizations.

In my last post I mentioned that I spent a lot of time learning about the technical details of Search Engine Optimization (SEO) and trying to optimize my Django application for that. I was ultimately reasonably successful in it but much of the logic to do so was tedious to author and rather unpleasant, which is why I'm excited about Next.JS, since it automates much of this for you right out of the box.

To learn it, I built this blog using their <a href="https://nextjs.org/learn/basics/create-nextjs-app">tutorial</a>, which I highly recommend!

My goal is to move <a href="https://www.unidosfin.com/en">Unidos</a> to Next.JS for the front-end and keep the Django back-end, much of which I've already converted to APIs.


2020 was a **difficult year for most people**, this was true for me as well. Fortunately, along the way I was able to learn some new things. More specifically, I spent a lot of my time learning how to develop web applications (particularly in <a href="https://www.djangoproject.com/">Django</a>), which included:

- Building a Content Management System (<a href="https://en.wikipedia.org/wiki/Content_management_system">CMS</a>)
- Image optimization and various forms of cacheing
- User authentication and security best practices (e.g., two factor authentication)
- Developing APIs using Django Rest Framework
- The benefits of JavaScript code compression/minification
- How to adhere to SEO best practices for web content
- Building Webhooks for 3rd party APIs
- Building an application that handles multiple languages in a database, as an API, and that optimizes for SEO

It has been an interesting exercise to be much more hands on with JavaScript this past year, especially since my expertise is mainly in Python. As a data scientist, it's interesting to learn how the web is developed and how data is created from the web.

In statistics, the Data Generating Process (<a href="https://en.wikipedia.org/wiki/Data_generating_process">DGP</a>) is an extremely critical part of approximating the world with mathematical functions. So, I wanted to learn very rigorously how the web is developed so that I could better understand the DGP and ultimately better approximate the things I'm particularly interested in.

As an entrepreneur this is a *terrible* way to allocate one's attention in order to accomplish one's business goals, but the knowledge I've gained over the year has been *extremely* valuable and it compounds significantly. I think the knowledge investment I've made this past year has better helped me prepare for much faster growth going forward.

What I've learned over the past 10 years is that investing in learning has exponential rewards, especially in time. Things that used to take me days or hours to accomplish can now be solved in minutes.

So, while my business didn't thrive this year, I do think I have learned a significant amount of information and that's invaluable.

Here's to hoping 2021 is more balanced on learning and execution. I'll try to write a little more frequently about some of the things I'm learning, so I hope you find it interesting.