Cách lưu trữ một trang web góc cạnh bằng Netlify và GitHub
Lưu trữ trang web Angular của bạn miễn phí bằng quy trình dễ dàng này.
Khi lưu trữ một trang web Angular trực tuyến, bạn có thể chọn giữa nhiều nền tảng có sẵn. Một trong số đó mà bạn có thể sử dụng miễn phí là Netlify.
Nếu bạn lưu trữ một bản sao mã nguồn trang web của mình trong kho lưu trữ GitHub, thì bạn có thể sử dụng Netlify để lưu trữ trang web đó.
Netlify cũng tự động triển khai lại trang web của bạn khi bạn đẩy bất kỳ thay đổi mới nào vào nhánh kho lưu trữ mà bạn đang lưu trữ.
Mục Lục
Cách tạo một ứng dụng góc ví dụ cơ bản
Bạn có thể tạo một ứng dụng Angular đơn giản bằng trình chỉnh sửa như Visual Studio Code. Sau đó, bạn có thể lưu trữ trang web này bằng Netlify.
- Tạo một ứng dụng Góc mới.
- Tạo một trang chủ đơn giản. Thay thế mã trong app.component.html tệp có nội dung trang đích sau:
<div class="container-dark header">
<h2>Our Business Website</h2>
</div>
<div class="container-white">
<div class="content">
<h2>Our Business Website</h2>
<p>Learn how to design, develop, and maintain your professional website in no time.</p>
</div>
</div>
<div class="container-orange">
<div class="content">
<h2>What We Do</h2>
<p>We give you the tools to develop websites and unique solutions for your customers. We also provide training for
maintenance and other website related topics.</p>
</div>
</div>
<div class="container-white">
<div class="content">
<h2>About Us</h2>
<p>We are a small business operating from Melbourne, Australia. Our spaces are uniquely crafted so clients can also
visit us in person.</p>
</div>
</div>
<div class="container-dark footer">
<p>Copyright 2022</p>
</div> - Thêm một số kiểu dáng cho ứng dụng Angular bằng cách thêm một số CSS vào app.component.css tập tin:
* {
font-family: "Arial", sans-serif;
}
.header {
padding: 30px 50px;
}
.footer {
padding: 5px 50px;
text-align: center;
}
.container-dark {
background-color:
color: white;
display: flex;
align-items: center;
}
.container-orange {
background-color:
color:
}
.container-white {
background-color: whitesmoke;
color:
}
.content {
padding: 100px 25%;
display: flex;
flex-direction: column;
line-height: 2rem;
font-size: 1.2em;
align-items: center;
text-align: center;
} - Thêm một số kiểu dáng cho ứng dụng Angular tổng thể trong phong cách.css:
body {
margin: 0;
padding: 0;
} - Để kiểm tra ứng dụng, hãy điều hướng đến thư mục gốc của ứng dụng bằng thiết bị đầu cuối hoặc dòng lệnh. gõ phục vụ yêu cầu:
ng serve - Đợi mã của bạn biên dịch và truy cập http://localhost:4200/ trong trình duyệt web để xem ứng dụng của bạn.
- bên trong .browserslistrc tệp, hãy xóa iOS safari phiên bản 15.2-15.3. Điều này sẽ ngăn các lỗi tương thích hiển thị trong bảng điều khiển khi bạn xây dựng dự án.
last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not ios_saf 15.2-15.3
not safari 15.2-15.3 - Xây dựng mã của bạn bằng cách sử dụng xây dựng lệnh trong thiết bị đầu cuối:
ng build - bên trong .gitignore tệp, xóa hoặc nhận xét /quận hàng. Loại bỏ nó sẽ đảm bảo quận nằm trong tập hợp các tệp mà bạn đẩy vào kho lưu trữ GitHub của mình.
How to Push Your Angular Code to GitHub
You will need to store your code in a remote repository for Netlify to access the source code.
You can create a new repository on GitHub, and push your website's code to that repository. If you are not familiar with GitHub, it might be useful to understand some of GitHub's basic features first.
- Create a new repository on GitHub. You can do this by logging in to GitHub and clicking on New.
- Nhập thông tin chi tiết cho kho lưu trữ mới của bạn. Đặt cho nó một cái tên chẳng hạn như "netlify-app" và mô tả. Không khởi tạo kho lưu trữ bằng tệp README, tệp .gitignore hoặc giấy phép.
- Trong một thiết bị đầu cuối trên máy tính của bạn, hãy điều hướng đến thư mục mà bạn đã lưu trữ ứng dụng Angular của mình. Chạy các lệnh sau để khởi tạo thư mục của bạn dưới dạng kho lưu trữ git:
git init
git add .
git commit -m "first commit"
- Đẩy mã bên trong thư mục này vào kho lưu trữ từ xa mới mà bạn đã tạo trên GitHub. Theo git remote thêm bản gốc, chi nhánh gitvà đẩy git các lệnh do GitHub cung cấp trên trang kho lưu trữ từ xa của bạn:
git remote add original <Your GitHub repo link>
git branch -M main
git push -u origin main
- Bạn có thể xác nhận rằng mã ứng dụng Angular của bạn hiện có trong kho lưu trữ GitHub từ xa bằng cách làm mới trang kho lưu trữ GitHub.
Cách sử dụng Netlify để lưu trữ mã của bạn
Để lưu trữ mã của bạn bằng Netlify, bạn cần cấp cho mã đó quyền truy cập vào mã nguồn GitHub của mình. Netlify sau đó sẽ sử dụng quận thư mục của dự án Angular của bạn để xuất bản phiên bản mã đã xây dựng của bạn.
Bạn có thể định cấu hình tất cả các cài đặt này bằng cách thực hiện theo các bước cấu hình khi tạo một trang web mới:
- Đăng nhập hoặc đăng ký Netlify. Bạn có thể làm như vậy bằng thông tin đăng nhập GitHub của mình.
- Từ bảng điều khiển chính và trang danh sách trang web, hãy mở rộng Thêm trang web mớivà chọn Nhập một dự án hiện có.
- Lựa chọn GitHub.
- Bấm vào Định cấu hình Netlify trên GitHub.
- Bấm vào Cài đặt.
- Netlify sẽ hiển thị danh sách các kho GitHub của bạn. Chọn một cái mà bạn muốn lưu trữ. Ví dụ: nếu bạn đã đặt tên cho kho lưu trữ của mình là "netlify-app", thì hãy chọn "netlify-app" từ danh sách.
- Trong màn hình cấu hình, hãy để lại Người sở hữu, Chi nhánh triển khaivà thư mục cơ sở các trường theo giá trị mặc định của chúng. Nếu bạn đang xuất bản một nhánh cụ thể, chẳng hạn như một nhánh "Sản xuất" riêng biệt, bạn có thể thêm nhánh đó vào Chi nhánh triển khai đồng ruộng. Thay đổi xây dựng lệnh trường thành "ng build".
Cho Xuất bản thư mục trường, hãy nhập dist/
. Nếu bạn không biết tên dự án là gì, bạn có thể điều hướng đến thư mục dist của dự án để tìm nó ở đó. Ví dụ: "dist/netlify-app". 
- Bấm vào Triển khai trang web.
- Đợi quá trình triển khai hoàn tất. Quá trình này có thể mất vài phút và bạn có thể cần làm mới trang. Nếu mọi việc suôn sẻ, bạn sẽ có thể thấy triển khai thành công trong danh sách triển khai. Nhấp vào triển khai đã xuất bản của bạn, ví dụ: Sản xuất: main@HEAD.
- bấm vào Triển khai sản xuất mở cái nút.
- Giờ đây, bạn có thể xem trang web của mình trong một tab khác, sử dụng URL ở định dạng
.netlify.app. Nếu bạn đang lưu trữ một trang web có nhiều lần chuyển hướng, bạn không thể chuyển hướng đến các trang khác. Trong trường hợp này, có một cách để khắc phục lỗi chuyển hướng trên Netlify. Nếu muốn, bạn cũng có thể sửa đổi tên miền miễn phí của mình. 
Lưu trữ trang web của bạn bằng GitHub và Netlify
Hy vọng rằng giờ đây bạn có thể lưu trữ thành công một trang web bằng GitHub và Netlify. Bạn có thể thiết lập triển khai tự động cho các nhánh nhất định của kho lưu trữ GitHub. Bằng cách này, bạn có thể tự động hóa và hợp lý hóa việc triển khai trang web của mình.
Nhưng Netlify không phải là cách duy nhất bạn có thể triển khai ứng dụng Angular trực tuyến. Bạn cũng có thể sử dụng các nền tảng khác như Trang GitHub.