10 KiB
NEXT.JS LEXICAL
This is a sleek and efficient web blog project, built with Next.js + MDX + TailwindCSS. You can write your blog posts in Markdown and easily deploy them on Vercel.
It has all the basic functions of a blog website: tag classification, writing, comments, title list, etc.
It is a responsive website with good support for most different screen sizes available in the market. Whether it is a mobile phone, tablet, portable small-sized computer, etc., you can easily read website content on it.
| Home Page In Mobile | Reader Page In Mobile |
|---|---|
 |
 |
More importantly, this project can be flexibly configured. This project only writes the basic functions of the blog website and is not obsessed with the details, which means that you can write the theme you like.
Quick Start
Before diving into this project, I assume you already have the following knowledge:
- Familiarity with React.js, Next.js, Node.js development, and proficiency in TypeScript.
- Ability to write Markdown documents and HTML documents proficiently.
- Basic knowledge of web development, including deploying web services, SSL, reverse proxy, etc.
Initialize Project
The required runtime environment for this project is as follows:
- Node.js v18+
- npm v9+
- Chromium-based browser (Chrome, Edge) or Firefox.
I recommend using Visual Studio Code as the development tool.
Execute the following script to install dependencies:
npm install
Creating a Blog Post
All blog files should be written in Markdown and stored in the /data/posts directory. However, if you want to create a new blog post, do not directly create a Markdown file in the /data/posts directory manually! This is because each blog post needs to carry some FrontMatter header information, which should be auto-generated by the program, otherwise, it might cause parsing errors.
You should use a script to create the post.
npm run newpost
Then, the program will ask you a series of questions. Simply input your answers according to the prompts, and the program will automatically create a new post file for you and open it.
> lexical-blog@0.1.0 newpost
> node ./scripts/newpost.mjs
? What's the title?
// Required. Enter the title of your article here.
? What's the subtitle?
// Optional. Enter the subtitle of your article here.
? Assign tags for the posts and separate them with commas.
// Optional. Tag your article and separate the tags with commas, e.g., technology,news,programming
? Do NOT prompt this post? (D:false) No
// Default is no. Do you want to publish this post discreetly? If yes, then the article won't be pushed to the homepage or included in RSS after publishing, and can only be found in the complete article list.
? Do you want to pin this post? (D:false) No
// Default is no. Do you want to pin this article?
? Do you allow everybody to share this post? (D:true) Yes
// Do you allow others to share this article? If no, then copying and sharing via social links will be disabled for this article.
Afterward, the program will display the following message, indicating that the blog file has been created, and you can open and edit it.
Create Post Succeed.
Open the file ./data/posts/2023-12-24-This-is-my-new-post.md to write your blog now.
Some fields, such as summary, need to be filled in by yourself after opening the file.
Development
Run the project in development mode.
npm run dev
Alternatively, you can use Turbo Build for development mode, which has good performance for hot reloading.
npm run dev:turbo
Build
Build the project by running:
npm run build
Or use Turbo Build for building the project to enhance performance:
npm run build:turbo
Data and Configuration
The blog's configuration files are located in the ./data directory, and there are two types, both defined using TypeScript objects. Comments are provided to explain each item's data.
- config.ts: Main configuration information for the website, such as the website title, social accounts, avatar, cover images, etc.
- friends.ts: Used to store friend links.
FAQ
Fonts
After extensive practical testing, this site primarily uses Chinese and English texts. Therefore, this project employs Fangzheng Xiaobiaosong (for non-commercial use) and Source Han Serif Screen as font resources. They display well on both mobile and PC screens, hence are used respectively for official titles and main text.
However, to save bandwidth and improve loading speed, I've subset these two fonts, cutting out a large number of rare characters. These fonts only support Simplified Chinese, common special symbols, and English Latin letters. Therefore, if your blog uses rare Chinese characters, Japanese characters, Korean text, or other rare characters, they might not display correctly.
Of course, you can also download your preferred fonts from the internet and customize them according to your requirements.
MDX
After careful consideration, this project has adopted next-mdx-remote as the MDX engine. However, considering that this blog is primarily focused on recording text, rather than serving as a documentation-type website, and given the significant differences between MDX and Markdown syntax, this project supports the more commonly used Markdown syntax for content creation. Of course, you can also incorporate HTML snippets within Markdown for more flexible layout options.
Image Hosting, External Image Links
Due to the use of the next-mdx-remote engine in this project, it doesn't allow direct usage of images located in the project directory within Markdown. Therefore, when inserting images, it's recommended to upload them to an image hosting service and then reference the image URLs in the document.
I recommend using PicGO tool to set up your own image hosting. You can click here to view the documentation.
Comment System
This website utilizes Giscus as the comment system. For specific configuration instructions, please refer to this link. It requires each commenter to use their own GitHub account. Of course, you can also opt for other comment systems like Disqus.
You can click here to view the relevant information and usage of Giscus.
i18n
For personal blogs, i18n (internationalization) doesn't really serve a practical purpose. Therefore, this project does not support i18n at the moment. If you are a multilingual author and want to distinguish your blogs by language, I suggest adding a tag for the current language in the tags of each article. For instance, if you are a bilingual speaker of Spanish and English, you could add an español tag under the tags for each Spanish article, and an English tag for the English blogs.
Deployment
Deploying to Vercel
I recommend deploying this blog website using Vercel. It's popular for being free and powerful.
Click the button below for a quick deployment.
Deploying to a Server
Deploying to your own server can be a bit more complex. We recommend using PM2.js to deploy the website and using reverse proxy tools like Nginx to map the host domain to the local program port.
Additionally, you can use Let's Encrypt + Certbot to configure a free SSL certificate for the website. Click here for more detailed instructions.
Open Source License
This project is open source under the MIT License. We welcome any constructive feedback and code contributions.
Note: Please avoid using this project for commercial purposes whenever possible. Some artistic resources, such as third-party icons and fonts referenced in this project, are intended for non-commercial use and may pose legal risks if used commercially.