linkHow I built this personal website

linkCreating a github repository

Sign up for a github account and create a new repository. Keep the repository public. My username is rajnandan1 and I created a repository called rajnandan.

linkCloning the repository

Clone the repo to your local machine. I used the command line to do this.

1link$git clone https://github.com/rajnandan1/rajnandan.git

2link$cd rajnandan

linkSetup codedoc

I used codedoc to create my website.

1link$npm i -g @codedoc/cli

2link$codedoc install

linkRun the site in local

1link$codedoc serve

The site should be running on http://localhost:3000

linkHome Page

The home page is located at docs/md/index.md and the content is written in markdown.

linkAdding a new page

To add a new page, create a new markdown file in the docs/md folder.

linkAdding the Nav bar

The nav bar is located in .codedoc/content/header.tsx.

Suppose you add a file called docs/md/about.md, you can add a link to the nav bar by adding the following code.

1linkreturn (

2link    <div class={classes.header}>

3link        <a href="/" class="nav-link">

4link            Home Page

5link        </a>

6link        <a href="/about" class="nav-link">

7link            About

8link        </a>

9link    </div>

10link);

linkCustomizing theme

You can customize the theme present in .codedoc/theme.ts file.

1linkexport const theme = /*#__PURE__*/ createTheme({

2link    light: {

3link        background: "#fffdf0",

4link        text: "#45475a",

5link        primary: "#8E7AB5",

6link    },

7link    dark: {

8link        background: "#11111b",

9link        text: "#cdd6f4",

10link        primary: "#a6e3a1",

11link    }

12link});

linkAdding font

To add a font, you can add the following code to .codedoc/config.ts file.

1linkfonts: {

2link    text: {

3link        url: "https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap",

4link        name: "Montserrat",

5link    },

6link},

linkAdding title and fav icon

You can add the title and fav icon in .codedoc/config.ts file.

1linkfavicon: "/assets/images/favicon.ico",

2linktitle: {

3link    base: "Raj Nandan Sharma", // --> the base title of your doc pages

4link},

linkAdding images

You can add images in assets/images folder. In the project you can refer to the images as /assets/images/me.jpg.

linkAdding custom CSS

You can add custom CSS in .codedoc/plugins/css.tsx file.

linkAdding custom JS

You can add custom JS in .codedoc/plugins/js.tsx file.

linkAdding google analytics or any other

You can add google analytics or any other script in .codedoc/plugins/ms-clarity.tsx file. It has microsft clarity script. You can replace it with your own script.

This is what you would do to add google analytics.

1linkreturn function (): ConfigOverride {

2link    return {

3link        page: {

4link            scripts: [

5link                <script

6link                    async

7link                    src="https://www.googletagmanager.com/gtag/js?id=G-Q3MLRX"

8link                />,

9link                <script>

10link                    {`

11link                        window.dataLayer = window.dataLayer || [];

12link                        function gtag() {

13link                            dataLayer.push(arguments);

14link                        }

15link                        gtag("js", new Date());

16link

17link                        gtag("config", "G-Q3MLRX");

18link                    `}

19link                </script>,

20link            ],

21link        },

22link    };

23link};

Replace G-Q3MLRX with your own google analytics id.

linkHow to a blog

Blogs are added inside the blogs folder. It has sub folders which are named as mmm-YYYY. Example: blogs/may-2021. Inside this folder, you can add markdown files.

Also don't forget to add the blog to the nav bar.

linkBuild Blog

If you have added blogs then run. This will create a new markdown file with a catalog of all the blogs sorted chronologically. It would be under /blogs and this what you should add in the nav bar.

1link$node scripts/blog.js

linkBuild site

1link$codedoc build

linkPublish

Push your changes to github

1link$git add .

2link$git commit -m "commit message"

3link$git push

linkCreate a github page

Go to your repository settings and scroll down to the github pages section. Select the branch as gh-pages and click save.

linkCustom Domain

Buy a domain and make DNS changes as shown below. The same you will have to add in github pages custom domain section.

linkConnect with Obsidian

Also I am using obsidian to write the markdown. Just add the root folder as a vault in obsidian.