Giter Club home page Giter Club logo

blog's Introduction

blog

This is the blog that powers rauchg.com, built on next.js and deployed to the cloud via now.

Depends on the blog-views microservice for the realtime views display.

How to run

Development

All that's needed to run this blog is:

npm install
npm run dev

Then head to http://localhost:3000. Changes you make to components will henceforth be reflected there in realtime.

Deployment

All that's needed to deploy this blog to the cloud is to execute a single command (install it here)

now

When I deploy, I get a new instance of the blog at a new, immutable URL. When I browse to it and verify it looks ok, I set up an alias targetting the production URL rauchg.com.

now alias <url> rauchg.com

Architecture

Pure components

Every stateless pure component is found under ./components.

Every component that has to do with styling the post's markup is found under ./components/post/

These components make up the style guide of the application.

Blog posts

Every blog post is a static page hosted under pages/$year/.

This allows every post to load arbitrary modules, have custom layouts and take advantage of automatic code splitting and lazy loading.

This means that the bloat of a single post doesn't "rub off on" the rest of the site.

An index of all posts is maintained in JSON format as ./posts.json for practical reasons.

Custom server

I set up a server.js that boots up Next.js programatically. This gives me complete control over the HTTP request and response cycle.

In this case, the routes structured under pages/ are sufficient, but I set up a few redirections to retain compatibility with my previous WordPress based setup.

To start the custom server, I run node server.js upon deployment.

blog's People

Contributors

rauchg avatar aranajhonny avatar arun-is avatar martinstarman avatar

Watchers

James Cloos avatar Elkin Urango avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.