TeXBlog is a lightweight Gatsby starter, enabled with LaTeX to allow you to showcase your beautifully typeset articles. The perfect complement to maths and science blogs.
Deploy with just one click to Vercel or Netlify
-
Create a Gatsby site.
Use the Gatsby CLI to create a new site, specifying this project. If you don't have the CLI installed already, see Gastby instructions.
# Modify "my-texblog" to your project name gatsby new my-texblog https://github.com/gatsbyjs/gatsby-starter-default -
Start developing.
Navigate into your new site’s directory, install yarn dependencies, and start it up.
cd my-texblog yarn install gatsby develop -
Open the source code and start editing!
Your site is now running at
http://localhost:8000(Note: You'll also see a second link:
http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.)Edit the
gatsby-config.jsfile and edit thesiteMetadavariables. Save your changes and the browser will update in real time! (Note: If the browser doesn't update, restart your development environment to view the changes)
I wanted to have a balance of statically typed code which would be heavily customisable as well as templated code for easy setting up. I ended up making the blog posts or "articles" dynamically generated using mdx and I made the site pages fully customisable to add an extra layer of flexibility.
Articles are written using mdx (tutorial here) and are located in the /content/posts/ directory. They are automatically sourced by the Posts component and to add them you simply create a new mdx file in the folder.
Pages are simply site pages which can be fully customised. They are located in /src/pages/ and accept jsx, tsx or js files. (Note that pages are not sourced dynamically and must be added to the /src/comonents/Header/header.tsx component individually)
The site title, author and description are all dynamically sourced from gatsby-config.js to make it easier to update through one file. Modifying these will update banners and site details all in real time via the Gatsby development environment.
siteMetadata: {
title: `TeXBlog`,
description: `A simple, LaTeX enabled starter to properly showcase your beautifully typeset articles. Perfectly complements STEM blogs.`,
author: `Akshat Bisht`,
},TeXBlog comes with a custom SocialLinks component which is used to dynamically generate a list of social media icons. The SocialLinks component is located in /src/components/SocialLinks/ and is heavily customisable. The icons are fetched using react-icons and so any icon in their icon library can be imported and used.
In order to change the social media accounts open /src/components/SocialLinks/ and edit the socialMediaAccounts const.
const socialMediaAccounts = [
{
id: 1,
icon: FaGithub,
url: "http://github.com/aaaakshat/gatsby-starter-texblog"
},
{
id: 2,
icon: GrGatsbyjs,
url: "https://www.gatsbyjs.org/starters/aaaakshat/gatsby-starter-texblog/",
},
// add more here...
]There are 3 values you must change for every account added:
id: Required as part of react's mapping function and should simply indicate the numerical id of each component (i.e. first component = id: 1)icon: Indicates the icon the component will use fromreact-iconsselect one from their libraryurl: Represents your url for the social media account
For sites using Google Analytics, the plugin comes pre-installed and you can add your analytics tracking id (UA-12345...) in the gatsby-config.js file. If you are using a cloud deployment model, add GOOGLE_ANALYTICS_TRACKING_ID to your environment variables and assign the values through there.
{
resolve: `gatsby-plugin-google-analytics`,
options: {
trackingId: process.env.GOOGLE_ANALYTICS_TRACKING_ID,
head: true,
},
},.
├── node_modules
├── src
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md
-
/node_modules: This directory contains all of the modules of code that your project depends on (npm packages) are installed viayarn install -
/src: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template.srcis a convention for “source code”. -
.gitignore: This file tells git which files it should not track / not maintain a version history for and are not uploaded to GitHub. -
.prettierrc: This is a configuration file for Prettier. Prettier is a tool to help keep the formatting of your code consistent. -
gatsby-browser.js*: This file is where Gatsby expects to find any usage of the Gatsby browser APIs (if any). These allow customization/extension of default Gatsby settings affecting the browser. -
gatsby-config.js*: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the config docs for more detail). -
gatsby-node.js*: This file is where Gatsby expects to find any usage of the Gatsby Node APIs (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process. -
gatsby-ssr.js*: This file is where Gatsby expects to find any usage of the Gatsby server-side rendering APIs (if any). These allow customization of default Gatsby settings affecting server-side rendering. -
LICENSE: This Gatsby starter is licensed under the MIT License. -
package-lock.json(Seepackage.jsonbelow, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (Don’t change this file yourself). -
package.json: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project. -
README.md: This very text file containing useful reference information about your project.
*If you edit these files you may need to restart your development environment to see the changes.
This starter uses Gatsby which is a fast site generator for React. Full documentation for Gatsby is available on their website.
Contributions are appreciated and accepted via Github, from improvements on the source code to making this readme better.